jQuery巡回 - end()メソッド

jQuery 遍历参考手册

例

すべての段落を選択し、これらの段落内のspan要素を見つけ、それらを段落に戻し、段落を2ピクセルの赤いボーダーに設定します：

$("p").find("span").end().css("border", "2px red solid");

自分で試してみてください

定義と用法

end()メソッドは現在のチェーンの最も近いフィルタリング操作を終了し、一致する要素集合を元の状態に戻します。

文法

.end()

詳細な説明

ほとんどのjQueryの巡回メソッドはjQueryオブジェクトインスタンスを操作し、異なるDOM要素集合に一致する新しいオブジェクトを生成します。このような場合、新しい要素集合をオブジェクト内のスタックにプッシュする必要があります。成功したフィルタリングメソッドの呼び出しのたびに、新しい要素がスタックにプッシュされます。古い要素集合が必要な場合は、end()を使用してスタックから新しい集合をバックポップできます。

ページに短いリストのペアがあると仮定します：

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

例 1

主に jQuery のチェーン属性（コマンドチェーン）を使用する際に、jQuery は非常に便利です。コマンドチェーンを使用しない場合、一般的には前に呼び出されたオブジェクトを変数名で呼び出します。そのため、スタックの操作は必要ありません。しかし、end() を使用すると、すべてのメソッド呼び出しを連結できます：

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

自分で試してみてください

このコマンドチェーンは最初のリスト内のクラス名が foo の要素を検索し、その背景を赤色に設定します。end() はオブジェクトを find() 呼び出しの前の状態に戻しますので、第二个 find() は <ul class="first"> 内の '.bar' を検索し、リストの <li class="foo"> 内のものを検索するのではなく、マッチングされた要素の背景を緑色に設定します。最終的な結果は、最初のリストのプロジェクト 1 とプロジェクト 3 が色付きの背景を持つようになり、第二のリストのプロジェクトには何も変更がありません。

例 2

この長い jQuery チェーンは構造化されたコードブロックとして視覚化することができます。フィルタリングメソッドはネストされたコードブロックを開き、end() メソッドはコードブロックを閉じます：

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

自分で試してみてください

最後にこの end() は必須ではありません。なぜなら、その後この jQuery オブジェクトを捨てるからです。しかし、この形式でコードを書くと、end() は視覚的な対称性とプログラムの整頓を提供できます。少なくとも開発者にとっては読みやすくなりますが、その代償として、追加の呼び出しを行うため、少し性能の損失が発生します。

jQuery 遍历参考手册