javascript – jQuery – 关于“nextWhile”traversion的建议？

jQuery目前有.next(过滤器)和.nextAll(过滤器),但我需要适合这些中间的东西 – 实际上,一个.nextWhile(过滤器)重复执行下一步,直到过滤器不再为真,然后停止(而不是而不是继续到最后).

为了证明这一点,以下是一些简化的HTML – (实际上,它是动态生成的,随机顺序/数据,更多列,正确的类名等).

<table>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>

        <tr class="x"><td>a <button>Show/Hide</button></td></tr>
            <tr class="x y"><td>a1</td></tr>
            <tr class="x y"><td>a2</td></tr>

        <tr class="z"><td>b</td></tr>

        <tr class="z"><td>c</td></tr>

        <tr class="x"><td>d <button>Show/Hide</button></td></tr>
            <tr class="x y"><td>d1</td></tr>
            <tr class="x y"><td>d2</td></tr>
            <tr class="x y"><td>d3</td></tr>

        <tr class="z"><td>e</td></tr>

        <tr class="x"><td>f</td></tr>

        <tr class="x"><td>g <button>Show/Hide</button></td></tr>
            <tr class="x y"><td>g1</td></tr>
            <tr class="x y"><td>g2</td></tr>

    </tbody>
</table>

对此,运行一些JavaScript：

<script type="text/javascript">
    var $j = jQuery.noConflict();

    $j().ready(init);

    function init()
    {
        $j('tr.y').hide();
        $j('tr.x button').click( toggleRelated );
    }

    function toggleRelated()
    {
        // Only toggles one row
        // $j(this).parents('tr').next('.y').toggle();

        // Toggles unrelated ones also
        $j(this).parents('tr').nextAll('.y').toggle();

        // Not currently a jQuery construct
        // $j(this).parents('tr').nextWhile('.y').toggle();
    }

</script>

有没有一种简单的方法来实现这个nextWhile结构？

理想情况下,这需要在不修改当前HTML的情况下实现.

解决方法:

在jQuery中,您可以使用nextUntil()方法和:not选择器创建nextWhile()等效项.简单地说,while(条件为真){do something}与说直到(条件为假){做某事}相同.

考虑这个技巧示例,您需要选择跟随第一个.parent的所有.child元素：

<ul id="test">
  <li class="parent"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="divider"></li>
  <li class="parent"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

以下代码大致相当于.nextWhile(“.child”)并选择三个.child元素：

$("#test .parent:first").nextUntil(":not(.child)");