隱藏所有表格沒有「div」的行

Question

我有下面的單選按鈕和一個表格。當「僅錯誤」被選中的單選按鈕，我們需要hide all table rows that does not have a div with class name = ‘errorLine’

我已經寫了下面的代碼堡這個

//Hide all rows that does not have a div with class named "errorLine" 
    $("#tblVisualAidResult tbody tr:not('.errorLine')").hide(); 

這是行不通的。我明白原因 - 上面的代碼正在尋找類名爲'errorLine'的行;不尋找內部的div

我們如何修改這個jQuery代碼來隱藏錯誤行以外的所有行？

Fiddle

HTML

      <div class="floatLeftGeneral"> 
           View:</div> 
          <div class="floatLeftGeneral"> 
           <input type="radio" value="All" name="viewMode" class="viewModeRadio" checked="checked"> 
           All 
           <input type="radio" value="Error" name="viewMode" class="viewModeRadio"> 
           Errors Only 
          </div> 

</br>  

<table id="tblVisualAidResult" class="resultLog" border="0" cellpadding="0" cellspacing="0" style="width: 100%; display: table; background-color: rgb(229, 219, 226);"> 
      <thead> 
       <tr> 
        <td class="Heading3" style="width: 15%;"> 
         Serial Number 
        </td> 
        <td class="Heading3" style="width: 30%;"> 
         Container ID 
        </td> 
        <td class="Heading3"> 
         Status 
        </td> 
       </tr> 
      </thead> 
      <tbody> 
    <tr class="Normal" style="display: table-row;"> 
    <td style="padding-left: 5px"> 
      1 
    </td> 
    <td> 
      ~~3957495 
    </td> 
    <td> 
      Received 2 of 5 of work lot 6D20223403 
    </td> 

    </tr> 

    <tr class="Normal" style="display: table-row;"> 
    <td style="padding-left: 5px"> 
      <div class="errorLine">x<div> 
    </div></div></td> 
    <td> 
      ~~ 
    </td> 
    <td> 
      Case Label does not Exist 
    </td> 

    </tr> 

      </tbody> 
    </table> 

jQuery的

$(document).ready(function() 
{ 


    var viewMode = "All" 

    function handleLogVisibility() 
      { 

       if(viewMode == "Error") 
       { 
        alert(viewMode); 

        //Hide all rows that does not have a div with class named "errorLine" 
        $("#tblVisualAidResult tbody tr:not('.errorLine')").hide(); 
       } 
       else 
       { 
        alert(viewMode); 
        $("#tblVisualAidResult tbody tr:not('.errorLine')").show(); 
       } 


      } 



      //Radio button change 
      $('.viewModeRadio').change(function() 
      { 
       viewMode = $(this).val(); 
       handleLogVisibility(); 
      }); 


}); 

Answer 1

您可以結合使用:not()與:has() selector：

$("#tblVisualAidResult tbody tr:not(:has('.errorLine'))").hide(); 

然後再次顯示行，你可以重複選擇，儘管它的簡單，只是表明了一切：

$("#tblVisualAidResult tr").show(); 

演示：http://jsfiddle.net/Z86dq/29/

您可能會或可能不會發現它更具可讀性

$("#tblVisualAidResult tbody tr").not(":has('.errorLine')").hide(); 

演示：使用.not() method而非:not() selector打破大選擇了：http://jsfiddle.net/Z86dq/30/

Answer 2

試試這個：

$('#tblVisualAidResult tbody tr').each(function(){ 
    if($(this).find('div.errorLine').length === 0){ 
     $(this).hide(); 
    } 
}); 

Fiddle