Question

我试图在单击按钮时隐藏并显示某些表格行。

表行看起来像

<tr class="head">
   <td>Always</td>
   <td>Visible</td>
   <td><button></td>
</tr>

   <tr class="bg-detail hidden">
      <td>Hidden Col 1</td>
      <td>Hidden Col 2</td>
      <td>Hidden Col 3</td>
   </tr>
   <tr class="bg-detail hidden">
      <td>Hidden Col 1</td>
      <td>Hidden Col 2</td>
      <td>Hidden Col 3</td>
   </tr>
   <tr class="bg-detail hidden">
      <td>Hidden Col 1</td>
      <td>Hidden Col 2</td>
      <td>Hidden Col 3</td>
   </tr>

<tr class="head">
   <td>Always</td>
   <td>Visible</td>
   <td><button></td>
</tr>

因此，简而言之，bg-detail隐藏的tr都是第一个tr.head的子级。至于我的jQuery：

$('.btn-showdetail').on('click', function(){
     //console.log('btn-showdetail clicked');
     //$("i", this).toggleClass("mdi-menu mdi-menu-open");
     $(this).closest('tr').next('tr.bg-detail').toggleClass("hidden shown");
});

，但这只会切换它能够找到的下一个bg-detail。我在Wiki中找到了nextUntil，但没有在我的示例中使用它。

https://jsfiddle.net/1keyup/f8nbjxdy/1/

Answer 1

您可以使用nextUntil，但必须指定两个参数：

$(this)
  .closest('tr')
  .nextUntil('tr.head', 'tr.bg-detail')
  .toggleClass("hidden shown");

https://jsfiddle.net/k9c3L6rd/

jQuery查找具有相同类的所有元素，所有找到后停止

1 个答案: