ホームページ > 記事 > ウェブフロントエンド > jQueryのeach()、find()、filter()などのノード操作メソッドの詳細解説(推奨)
1.each(callback)
正式な説明:
戻り値: jQuery
概要
一致する各要素をコンテキストとして使用して関数を実行します。
は、渡された関数が実行されるたびに、関数内の this キーワードが異なる DOM 要素 (毎回異なる一致する要素) を指すことを意味します。また、関数が実行されるたびに、一致する要素集合内での実行環境としての要素の位置を表す数値(ゼロをベースとする整数)が関数にパラメータとして渡される。 「false」を返すとループが停止します (通常のループで「break」を使用するのと同じです)。次のループにジャンプするには、「true」を返します (通常のループで「Continue」を使用するのと同じです)。
パラメータ
コールバック
一致した要素ごとに実行される関数
例
説明:
2つの画像を反復処理し、それらのsrc属性を設定します。注: ここでは、これは jQuery オブジェクトではなく DOM オブジェクトを指します。
HTMLコード:
79d7c95122630a3791db16c5259dc98d79d7c95122630a3791db16c5259dc98d
jクエリコード:
$("img").each(function(i){ this.src = "test" + i + ".jpg"; });
結果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
2.fi nd(expr|obj| ele)
公式説明:
戻り値:jQuery
概要
指定された式に一致するすべての要素を検索します。この関数は、処理中の要素の子孫要素を見つけるための優れた方法です。
すべての検索は jQuery 式に依存します。この式は、CSS1-3 セレクター構文を使用して記述できます。
Parameters
expr String
jQueryオブジェクト object
要素を一致させるためのjQueryオブジェクト
element DOMElement
DOM要素
$("p").find("span")結果:
[ 45a2772a6b6107b401db3c9b82c049c2Hello54bdf357c58b8a65c66d7c19c8e4d114 ]
3.filter(expr|obj|ele|fn)
公式説明:
概要
指定された式に一致する要素のセットをフィルタリングします。
このメソッドは、マッチング範囲を狭めるために使用されます。複数の式はカンマで区切ります。
Parameters
expr String
jQuery オブジェクト object
現在の要素と一致する既存の jQuery オブジェクト。
要素式
要素を一致させるために使用される DOM 要素。
function(index) 関数
関数はテスト要素の集合として使用されます。これは、jQuery コレクション内の要素のインデックスであるパラメーター インデックスを受け入れます。関数では、これは現在の DOM 要素を指します。
例
パラメータセレクターの説明:
選択クラスで要素を保持する
HTMLコード:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQueryコード:
$("p").filter(".selected")
結果:
[ 27ec8ff0d0eb2aeaabbd785252528076And Again94b3e26ee717c64999d7867364b1b4a3 ]
jQueryのeach()、find()、filter()などのノード操作メソッドのより詳細な説明(推奨)は、PHP中国語Webサイトに注目してください。