JQueryのeach()の使用例を詳しく解説

jQuery オブジェクトの場合、各メソッドは単純に委譲されます。jQuery オブジェクトは、jQuery の各メソッドに最初のパラメータとして渡されます。つまり、jQuery によって提供される各メソッドは、パラメータ 1 によって提供されるすべてのオブジェクトです。子要素はメソッド呼び出しを 1 つずつ実行します

each(callback)

一致する各要素を関数を実行するコンテキストとして使用します。

は、渡された関数が実行されるたびに、関数内の this キーワードが異なる DOM 要素 (毎回異なる一致する要素) を指すことを意味します。また、関数が実行されるたびに、一致する要素の集合における実行環境としての要素の位置を表す数値（0から始まる整数）が関数にパラメータとして渡されます。 「false」を返すとループが停止します (通常のループで「break」を使用するのと同じです)。次のループにジャンプするには、「true」を返します (通常のループで「Continue」を使用するのと同じです)。

次のコールバックは コールバック関数 で、要素をトラバースするときに指定する必要がある操作を示します。以下の簡単な例から始めましょう:
2 つの画像を反復処理し、それらの src 属性 を設定します。注: ここでは、これは jQuery オブジェクトではなく DOM オブジェクトを指します。

HTML コード:

jQuery コード:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

結果: [ ]
もちろん、要素を移動するときは、 jquery ではカスタムのジャンプアウトが可能です。サンプルコードを参照してください。「return」を使用して事前に each() ループからジャンプできます。
HTML コード:

コードは次のとおりです:

色の変更

p>

jQuery コード:

$("button").click(function( ){

$(" p").each(function(index,domEle){
$(domEle).css("

背景

色","小麦");

if($(this).is(" #stop")){

$("span").text("p ブロックが #"+index+" の場所で停止します。");
return false;
}
});
または次のように書きます:


コードは次のとおりです:

$("button").click(function(){

$("p").each(function(index){

$(this).css("backgroundColor ","小麦"); if($(this).is("#stop")){ $("span").text("p ブロックが #"+index+" である場所で停止します。");

return false;

}
});


例:



each() メソッドは、一致する要素ごとに実行される関数を指定します

ヒント: false を返すと、ループを早期に停止できます。
$(selector).each(function. (index,element)) パラメータ 説明
function(index,element) 必須 一致する要素ごとに実行する関数を指定します •index - セレクター
•element のインデックス位置。 - 現在の要素 (「this」も使用できます。セレクター

インスタンス
は、各 li 要素のテキストを出力します:


コードは次のとおりです:



$("button").click(function() {
$("li").each(function() {

alert($(this).text())

}) });

インスタンス

obj オブジェクトは
array ではありません
このメソッドと1の最大の違いは、 fnメソッドが1つずつ置き換えられる 戻り値を考慮することです。つまり、fn 関数が false を返した場合でも、obj オブジェクトのすべてのプロパティが fn メソッドによって呼び出されます。呼び出しで渡されるパラメータは 1 に似ています。

コードは次のとおりです:

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == unknown ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply( obj, args ) === false )
}
}
} else {
if ( obj.length == unknown ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.長さ、val = obj[0]; i < fn.call(val,i,val) !== false;
}
}
obj を返します。

各メソッドの fn の特定の呼び出しメソッドは、単純な fn(i, val) または fn(args) ではなく、fn.call(val,i,val) または fn の形式であることに注意することが重要です。 apply(obj.args) の意味は、fn の独自の実装で、このポインターを直接使用して配列またはオブジェクトのサブ要素を参照できることを意味します。

それでは、それぞれからどのようにジャンプするのでしょうか?
jQuery が選択したオブジェクトを走査するときに、それぞれを使用する方が便利です。条件を満たすオブジェクトを見つけた後、このループから抜け出す必要があるアプリケーションがあります。
Javascript
は通常、ループから抜け出すために Break を使用します。 ある同僚がこの問題に遭遇し、無意識のうちに Break を使用してループから抜け出しました。結果はエラーです SyntaxError: unlabeled Break はループまたはスイッチ内にある必要があります
調査後、コールバック関数で
return false を使用する必要があります

コードは次のとおりです。 return' false' はループを停止します (通常のループで 'break' を使用するのと同じです)。
次のループにジャンプするには、「true」を返します (通常のループで「Continue」を使用するのと同じです)。

以上がJQueryのeach()の使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。