檢查所有tr元素的可見性：隱藏在兩個相同的類tr元素之間

Question

我搜索了很多地方，但我找不到正確的方法來做到這一點。
我有一個表的結構如下。

<tr class="header"> 
     <td colspan="9">Header 1</td> 
</tr> 
<tr class="filter"> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
</tr> 
<tr class="filter"> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
     <td>lorem ipsum</td> 
</tr> 
<tr class="header"> 
     <td colspan="9">Header 2</td> 
</tr> 

我使用的現場的桌面濾波器插件（即作用TD具有過濾器類元素）用於過濾不必要的行（與輸入框）。
正如你所猜測的，插件搜索每個tr.filter元素，如果不匹配，它會隱藏篩選器分類的行。
但是當所有tr.filter元素都隱藏時，標題行仍然可見。
所以我想的是：
檢查每tr.header elemets，如果所有tr.filter元素是隱藏的，直到明年tr.header元素隱藏此tr.header元素爲好。
例如：如果沒有可見tr元素行之間報頭1標題2，然後報頭1個行將被隱藏。

我試過下面這一點，但沒有成功：

$('tr.header').each(function(){ 
     if ($(this).nextUntil("tr.header").is(":hidden")){ 
     //i tried if ($(this).nextUntil("tr.header").css('display') == 'none'){ 
      $(this).hide(); 
     } else { 
      $(this).show() 
     } 
}); 

Answer 1

試試這個 -

$('tr.header').each(function(){ 
     if ($(this).nextUntil("tr.header").filter(function(){ 
      return $(this).is(':visible'); 
     }).length == 0){ 
      $(this).hide(); 
     } else { 
      $(this).show() 
     } 
});