1

我搜索了很多地方，但找不到合适的方法。
我有以下表格结构。

 <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元素，如果所有tr.filter元素都被隐藏，直到下一个tr.header元素也隐藏这个tr.header元素。例如：如果Header 1和Header 2
行 之间没有可见的 tr 元素，则Header 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()
      }
 });
4

1 回答 1

2

尝试这个 -

$('tr.header').each(function(){
      if ($(this).nextUntil("tr.header").filter(function(){
           return $(this).is(':visible');
      }).length == 0){
           $(this).hide();
      } else {
           $(this).show()
      }
});
于 2013-08-04T19:32:28.867 回答