javascript - 在每个表行中的特定行类之后查找下一个行类

Question

我需要用 jQuery 隐藏未使用的切换按钮。例如仅在标题 <tr class="header"> 之后才显示切换按钮接下来是数据<tr class="data">我有动态填充的表，如下代码所示:

 <table>
  <tr class="header">
    <td><a class="toggle">toggle</a></td>
    <td>Header</td>
  </tr>
  <tr class="data">
    <td></td>
    <td>data</td>
  </tr>
  <tr class="data">
    <td></td>
    <td>data</td>
  </tr>
  <tr class="data">
    <td></td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td><a class="toggle">toggle</a></td>
    <td>Header</td>
  </tr>
  <tr class="header">
    <td><a class="toggle">toggle</a></td>
    <td>Header</td>
  </tr>
  <tr class="data">
    <td></td>
    <td>data</td>
  </tr>
  <tr class="data">
    <td></td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td><a class="toggle">toggle</a></td>
    <td>Header</td>
  </tr>
  <tr class="header">
    <td><a class="toggle">toggle</a></td>
    <td>Header</td>
  </tr>
  <tr class="data">
    <td></td>
    <td>data</td>
  </tr>
</table>

Answer 1

这将隐藏切换按钮，其中具有 header 类的父行不位于具有 data 类的行之前:

$('.header').each(function() {
  if(!$(this).next().hasClass('data')) {
    $(this).find('.toggle').hide();
  }
});

Fiddle