Question

我有一个搜索过滤功能，但我99％肯定问题不存在。

我首先调用搜索过滤器然后运行if语句来确定是否应该隐藏该行。

想象一下，在执行搜索后，我有以下可见的表行：

<tr>
  <td class="time">content<td>
</tr>
<tr>
  <td>result</td>
<tr>
</tr>
  <td>result</td>
</tr>
<tr>
  <td class="time">content<td>
</tr>
<tr>
  <td class="time">content<td>
</tr>
<tr>
  <td class="time">content<td>
</tr>

我的目标是隐藏所有具有时间类的td元素，如果它们由包含具有相同时间类别的td元素的行继续。因此if语句应该隐藏最后三个只在我上面的例子中的行，即。：

<tr>
  <td class="time">content<td>
</tr>
<tr>
  <td>result</td>
<tr>
</tr>
  <td>result</td>
</tr>

我试过以下无济于事：

$('td.time').parent().each(function() {
  if($(this).siblings().first().children('td.time').length > 0) {
    $(this).hide();
  }
});

以上方法有效但仅在我的搜索返回单个结果时才有效。如果在不同的时间行之后存在另一个结果，则会错误地隐藏时间行。

以下是我目前所拥有的内容，但它只是隐藏了所有时间行，即使理论上它有意义：

$('td.time').parent().each(function() {
  if($(this).next(':visible').children('.time')) {
    $(this).hide();
  }
});

我唯一的解释是，使用.next（）只会查看下一个td.time父级而不是下一个所有可见的表行。

Answer 1

尝试将nextAll()用于父级tr，您可能不需要在此处使用每个来隐藏tr td的所有time类$(this).closest('tr').nextAll('tr:has(td.time)').hide();。

<强> Live Demo

{{1}}

Answer 2

它不是很优雅但是try this

$(".time").each(function() {
    if ($(this).parent("tr").next("tr").find(".time").length > 0) {
        $(this).parent("tr").hide();
    }
});

如果声明不起作用，隐藏下一个可见的兄弟姐妹

2 个答案: