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

【问题标题】：jquery find all elements with the same class, stop after all foundjquery查找具有相同类的所有元素，找到后停止
【发布时间】：2019-03-05 07:34:25
【问题描述】：

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

表格行看起来像。

<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");
});

但这只会切换它能够找到的下一个背景细节。我在 wiki 中找到了 nextUntil，但没有让它与我的示例一起使用。

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

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

https://jsfiddle.net/k9c3L6rd/

【讨论】：

嗨 Matei，感谢您的回答，当使用 nextAll 像您的示例一样时，全部切换jsfiddle.net/1keyup/f8nbjxdy/3
非常感谢！我想我出于某种原因误解了 nextUntil。