Как скрыть ячейку таблицы, если текст пуст

Question

Fiddle: http://jsfiddle.net/rg933mpd/

HTML:

<td style="padding: 15px; text-align: center;" colspan="3"> 
    <div class="alert info"> 
     <p> 
      <span class="lblInsMsg"></span> 
     </p> 
    </div> 
</td> 

Как скрыть весь TD из поля зрения, если диапазон является пустым (не имеет никакого текст в нем).

Answer 1

Вам нужно сделать что-то вроде этого, используя filter()

$('td').filter(function() { 
 
    return $(this).find('.lblInsMsg').text().trim() == ''; 
 
}).hide();

.hideIt 
 
{ 
 
\t display: none; 
 
} 
 
\t .alert.info { 
 
    border-color: #94dbff; 
 
    color: #0091DC; 
 
} 
 
.alert { 
 
    background: #ffffff; 
 
    border: 1px solid #bbbbbb; 
 
    color: #6D6D6D; 
 
    padding: 10px 10px 10px 60px; 
 
    margin-bottom: 20px; 
 
    position: relative; 
 
\t margin: 0 auto; 
 
\t width: 350px; 
 
} 
 
.alert.info:before { 
 
    background: url(images/info.png) no-repeat center center #bce9ff; 
 
} 
 
.alert:before { 
 
    background: #bbbbbb; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 50px; 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
.alert p { 
 
    margin: 0; 
 
\t text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td style="padding: 15px; text-align: center;" colspan="3"> 
 
     <div class="alert info"> 
 
     <p> 
 
      <span class="lblInsMsg"></span> 
 
     </p> 
 
     </div> 
 
    </td> 
 
    <td style="padding: 15px; text-align: center;" colspan="3"> 
 
     <div class="alert info"> 
 
     <p> 
 
      <span class="lblInsMsg">ss</span> 
 
     </p> 
 
     </div> 
 
    </td> 
 
    <table> 
 
     <tr> 
 
     <td style="padding: 15px; text-align: center;" colspan="3"> 
 
      <div class="alert info"> 
 
      <p> 
 
       <span class="lblInsMsg">dd</span> 
 
      </p> 
 
      </div> 
 
     </td> 
 
     <td style="padding: 15px; text-align: center;" colspan="3"> 
 
      <div class="alert info"> 
 
      <p> 
 
       <span class="lblInsMsg">ss</span> 
 
      </p> 
 
      </div> 
 
     </td>

Или

$('td').filter(function() { 
 
    return $(this).find('.lblInsMsg').is(':empty'); 
 
}).hide();

.hideIt { 
 
    display: none; 
 
} 
 
.alert.info { 
 
    border-color: #94dbff; 
 
    color: #0091DC; 
 
} 
 
.alert { 
 
    background: #ffffff; 
 
    border: 1px solid #bbbbbb; 
 
    color: #6D6D6D; 
 
    padding: 10px 10px 10px 60px; 
 
    margin-bottom: 20px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 350px; 
 
} 
 
.alert.info:before { 
 
    background: url(images/info.png) no-repeat center center #bce9ff; 
 
} 
 
.alert:before { 
 
    background: #bbbbbb; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 50px; 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
.alert p { 
 
    margin: 0; 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td style="padding: 15px; text-align: center;" colspan="3"> 
 
     <div class="alert info"> 
 
     <p> 
 
      <span class="lblInsMsg"></span> 
 
     </p> 
 
     </div> 
 
    </td> 
 
    <td style="padding: 15px; text-align: center;" colspan="3"> 
 
     <div class="alert info"> 
 
     <p> 
 
      <span class="lblInsMsg">ss</span> 
 
     </p> 
 
     </div> 
 
    </td> 
 
    <table> 
 
     <tr> 
 
     <td style="padding: 15px; text-align: center;" colspan="3"> 
 
      <div class="alert info"> 
 
      <p> 
 
       <span class="lblInsMsg">dd</span> 
 
      </p> 
 
      </div> 
 
     </td> 
 
     <td style="padding: 15px; text-align: center;" colspan="3"> 
 
      <div class="alert info"> 
 
      <p> 
 
       <span class="lblInsMsg">ss</span> 
 
      </p> 
 
      </div> 
 
     </td>

Answer 2

в вашем js-коде, $ (this) относится к объекту window.

этот код работал для меня

if ($('.lblInsMsg').is(':empty')) { 
    //do something 
    $('.lblInsMsg').parent().parent().parent().addClass("hideIt"); //doesn't hide the TD 
    alert("empty"); // shows up 
}