Question

我在一个表中有一个列表，该列表按字母顺序排序。

<tbody>
<tr>
    <th><strong>A</strong></th>
</tr>
<tr>
    <td class="hide-me">Ants</td>
</tr>
<tr>
    <td class="hide-me">Animals</td>
</tr>
<tr>
    <td  class="hide-me">Apples</td>
</tr>

<tr>
    <th><strong>B</strong></th>
</tr>
<tr>
    <td>Bars</td>
</tr>
<tr>
    <td class="hide-me">Bats</td>
</tr>
<tr>
    <td class="hide-me">Bananas</td>
</tr>

<tr>
    <th><strong>C</strong></th>
</tr>
<tr>
    <td>Cans</td>
</tr>
<tr>
    <td>Cars</td>
</tr>
<tr>
    <td>Cats</td>
</tr>
</tbody>

我使用$('table tr:has(td.hide-me)').hide()方法来隐藏任何我不想显示的元素。但是，如果包含普通表格单元格的表格行被隐藏，我也希望能够隐藏表格标题。

在上述情况下，我想隐藏<tr><th><strong>A</strong></th></tr>，因为它隐藏了以下所有表行，但没有隐藏<tr><th><strong>B</strong></th></tr>，因为不是所有表行都被隐藏了。

我对Jquery还是比较陌生，并且不确定在这种情况下如何最好地实现条件语句。

Answer 1

我做的第一件事是在tr上放置一个类，以指示该行包含标题。这样可以更轻松地分辨出哪些行是标题，而不必询问它们是否包含th。

我做的第二件事是更改.hide-me的hide表达式，以便首先找到我，然后找到其父tr，然后将其隐藏。这样，选择器不必找到tr并检查每个人是否都对我隐藏。

然后，最后逻辑查找所有标头，并显示它们，因此，如果以前隐藏了标头，则它们将可见。然后，它过滤标头，仅返回没有任何未隐藏的后续tr的标头。 Havin后面没有任何可见的标头，然后将其隐藏。

$('.hide-me').closest('tr').hide();

$('.header').show().filter(function(){
  return $(this).nextUntil('.header').filter(':not(:hidden)').length < 1;
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="header">
      <th><strong>A</strong></th>
    </tr>
    <tr>
      <td class="hide-me">Ants</td>
    </tr>
    <tr>
      <td class="hide-me">Animals</td>
    </tr>
    <tr>
      <td class="hide-me">Apples</td>
    </tr>

    <tr class="header">
      <th><strong>B</strong></th>
    </tr>
    <tr>
      <td>Bars</td>
    </tr>
    <tr>
      <td class="hide-me">Bats</td>
    </tr>
    <tr>
      <td class="hide-me">Bananas</td>
    </tr>

    <tr class="header">
      <th><strong>C</strong></th>
    </tr>
    <tr>
      <td>Cans</td>
    </tr>
    <tr>
      <td>Cars</td>
    </tr>
    <tr>
      <td>Cats</td>
    </tr>
  </tbody>
</table>

隐藏表格标题，如果表格行直到下一个表格标题被隐藏

1 个答案: