隐藏/显示具有特定类的表行，直到具有不同类名的另一行？ [英] Hide/show table rows with a specific class until another row with a different class name?

问题描述

我有要显示和隐藏的行，但只能到下一个第一级行。我的代码是切换所有第二级行，而不是直到下一个第一级行。

I have rows I want to show and hide, but only up until the next first-level row. My code is toggling all of the second-level rows instead of the ones up until the next first-level row.

当你点击class行的行时-level，我希望每一行都有类二级，直到下一个第一级实例切换为止。

When you click on a row with the class "first-level", I would like every row with the class "second-level" up until the next instance of "first-level" to toggle.

http://jsfiddle.net/a837tc24/

<table>
  <tbody>
    <tr class="first-level">
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="first-level">
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
  </tbody>
</table>

js：

var firstLevel = $('.first-level')
var secondLevel = $('.second-level')

$(firstLevel).click(function() {
    $(secondLevel).nextUntil(firstLevel).toggle("slow");
});

推荐答案

您需要从点击的元素开始：

You need to start at the element clicked:

$('.first-level').click(function() {
    $(this).nextUntil('.first-level').toggle("slow");       
});

传递整个集合只是不起作用，因为没有单一的参考点可以从

Passing in the whole collection just won't work as there is no single point of reference to start from

DEMO

这篇关于隐藏/显示具有特定类的表行，直到具有不同类名的另一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！