隐藏/显示具有特定类的表行,直到具有不同类名的另一行?

问题描述:

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

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