jQuery - 关于"nextWhile"traversion的建议？

Question

jQuery目前有.next(filter),.nextAll(filter)但我需要适合这些中间的东西 - 实际上,.nextWhile(filter)在过滤器不再为真,然后停止(而不是继续到结束)之前,它会重复执行.

为了证明这一点,以下是一些简化的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的情况下实现.

Answer 1

在jQuery中,您可以创建nextWhile()等效的using nextUntil()方法和:not选择器.简单地说,while (condition is true) { do something }就像说的一样until (condition is false) { do something }.

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

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