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元素，则检查每个tr.filter元素，直到隐藏此tr.header元素的下一个tr.header元素为止。
例如：如果标题1 和标题2 行之间没有可见的tr元素，则标题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()
      }
});

检查所有tr元素的可见性：隐藏在两个相同的类tr元素之间

1 个答案: