JQuery で each() を使用する手順

jQuery オブジェクトの場合、各メソッドは単純に委譲されます。つまり、jQuery オブジェクトは、jQuery の各メソッドに最初のパラメーターとして渡されます。つまり、jQuery によって提供される各メソッドは、パラメーター 1 によって提供されるすべてのオブジェクトです。 -elements はメソッド呼び出しを 1 つずつ実行します。 each() 関数は、基本的にすべてのフレームワークによって提供されるツール関数であり、これを介してオブジェクトと配列の属性値を走査して処理できます。 jQuery と jQuery オブジェクトの両方がこのメソッドを実装します。jQuery オブジェクトの場合、各メソッドは単純に委任されます。つまり、jQuery オブジェクトは jQuery の各メソッドに最初のパラメーターとして渡されます。つまり、jQuery によって提供される各メソッドは、jQuery のすべてのサブ要素です。パラメータ 1 で指定されたオブジェクトは 1 つずつ呼び出されます。 jQuery オブジェクトが提供する each メソッドは、jQuery 内のサブ要素を 1 つずつ呼び出します。

各関数の効果は、パラメーターの種類によっては完全に一致しません。

1. オブジェクトを走査します (追加のパラメーターを使用します)

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

$.each(Object, function(p1, p2) {
     this;       //这里的this指向每次遍历中Object的当前属性值
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

2. オブジェクトを走査します。 array

(追加パラメータあり)

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

$.each(Array, function(p1, p2){
     this;       //这里的this指向每次遍历中Array的当前元素
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

3. オブジェクトを走査します (追加パラメータなし)

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

$.each(Object, function(name, value) {
     this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值
});

4.追加パラメータ)

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

$.each(Array, function(i, value) {
     this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素
});

jQuery について触れてみましょう 各メソッドの一般的な使用方法をいくつか説明します

var arr = [ "one", "two", "three", "four"];  
 $.each(arr, function(){  
 alert(this);  
 });  
//上面这个each输出的结果分别为：one,two,three,four  
  
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]  
$.each(arr1, function(i, item){  
 alert(item[0]);  
});  
//其实arr1为一个二维数组，item相当于取每一个一维数组，  
//item[0]相对于取每一个一维数组里的第一个值  
//所以上面这个each输出分别为：1 4 7  
 
 
var obj = { one:1, two:2, three:3, four:4};  
$.each(obj, function(key, val) {  
 alert(obj[key]);    
});  
//这个each就有更厉害了，能循环每一个属性  
//输出结果为：1 2 3 4

JQuery の各関数は、1.3.2 の公式ドキュメントで次のように説明されています。関数を実行するためのコンテキストとして、一致する要素ごとに

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

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

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

<img/><img/>jQuery 代码: 
$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
});

結果: [ 4aa81aff6f7846139a8c0e107b4b55d7, 9b5906d777c3e5ae0f60d33152154aa9もちろん、要素を走査するとき、jquery はカスタマイズされたジャンプを許可します。サンプル コードを参照してください。「return」を使用して、事前に each() ループから抜け出すことができます。

HTML コード:

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

<button>Change colors</button> 
<span></span> 
<p></p> 
<p></p> 
<p></p> 
<p></p> 
<p id="stop">Stop here</p> 
<p></p> 
<p></p> 
<p></p>

jQuery コード:

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

$("button").click(function(){ 
$("p").each(function(index,domEle){ 
$(domEle).css("
background
Color","wheat"); 
if($(this).is("#stop")){ 
$("span").text("在p块为#"+index+"的地方停止。"); 
return false; 
} 
});

またはこれ:

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

$("button").click(function(){ 
$("p").each(function(index){ 
$(this).css("backgroundColor","wheat"); 
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()) });

});

Instance

obj オブジェクトは配列ではありません
このメソッドと 1 の最大の違いは、戻り値に関係なく、fn メソッドが 1 つずつ実行されることです。つまり、すべてのプロパティが実行されます。 fn が使用されている場合でも、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 はループまたはスイッチ内にある必要があります
チェックした後、
を使用してコールバック関数で false を返す必要があります

コードをコピーします

'false' を返すとループが停止します (通常のループで 'break' を使用するのと同じです)。

次のループにジャンプするには、「true」を返します (通常のループで「Continue」を使用するのと同じです)。

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