5

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を変更せずに達成する必要があります。

4

3 に答える 3

6

jQueryでは、メソッドとセレクターnextWhile()を使用して同等のものを作成できます。簡単に言えば、と言うのと同じです。nextUntil():notwhile (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>

次のコードは、3つの要素とほぼ同等であり、3つの要素.nextWhile(".child")を選択します。.child

$("#test .parent:first").nextUntil(":not(.child)");
于 2013-03-19T08:55:22.350 に答える
1

更新:再帰のアイデアをあきらめ、カウントしてスライスすることにしました (最後の例を参照)。

最初の試行:
このコードにはバグがあります。最後の 2 つのアイテムしか返さないため、3 つ以上のアイテムに対しては機能しません。

jQuery.fn.nextWhile = function(f)
{
    if( this.next(f).html() )
    {
        return this.next(f).nextWhile(f).andSelf();
    }
    else
    {
        return this;
    }
};


現行版：

jQuery.fn.nextWhile = function(f)
{
    var Next = this.next(f);
    var Pos = 0;

    while( Next.length > 0 )
    {
        Pos++;
        Next = Next.next(f);
    }

    return this.nextAll(f).slice(0,Pos);
}

これはうまく機能しているように見えますが、すべてを選択してからほんの一握りだけをスライスすることでパフォーマンスが低下するかどうかはわかりません。

于 2009-02-12T14:01:32.327 に答える
0

私のバージョン:

$.fn.extend({
  nextWhile: function(selector) {
    var $result = $([]);
    this.each(function() {
      var $next = $(this).next();
      while ($next.is(selector)) {
        $result = $result.add($next);
        $next = $next.next();
      }
    });
    return $result;
  }
});
于 2015-07-07T11:00:59.503 に答える