JQuery_jquery での each() の使用手順

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

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

1. オブジェクトをトラバースします (追加パラメーターあり)

コードをコピーします コードは次のとおりです:

$.each(オブジェクト, 関数(p1, p2) {
This; //ここでは、各トラバーサルにおける Object の現在のプロパティ値を指します
p1; p2; // 追加パラメータにアクセスします
}, ['パラメータ 1', 'パラメータ 2']);

2. 配列を走査します (添付パラメーターを使用)

コードをコピーします コードは次のとおりです:

$.each(配列, 関数(p1, p2){
This; //ここでは、各走査における配列の現在の要素を指します
p1; p2; // 追加パラメータにアクセスします
}, ['パラメータ 1', 'パラメータ 2']);

3. オブジェクトのトラバース (追加パラメーターなし)

コードをコピーします コードは次のとおりです:

$.each(オブジェクト, 関数(名前, 値) {
This; //this は現在の属性の値を指します
Name; //name は Object
の現在のプロパティの名前を表します。 値; //値はオブジェクト
の現在のプロパティの値を表します。 });

4. 配列を走査します (追加パラメーターなし)

コードをコピーします コードは次のとおりです:

$.each(配列, 関数(i, 値) {
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 の公式ドキュメントでは次のように説明されています。

それぞれ(コールバック)

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

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

後続のコールバックは、要素をトラバースするときに割り当てる必要がある操作を示すコールバック関数です。以下の簡単な例を見てみましょう:
2 つのイメージを反復処理し、src 属性を設定します。注: ここでは、これは jQuery オブジェクトではなく DOM オブジェクトを指します。

HTML コード:

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

79d7c95122630a3791db16c5259dc98d79d7c95122630a3791db16c5259dc98djQuery コード:
$("img").each(function(i){
this.src = "テスト" i ".jpg"; });


結果:[ 4aa81aff6f7846139a8c0e107b4b55d7, 38584b65941cf93fc98e22d94659cce0色を変更70c479cc3a65ca25a1e3b1bfd39b1a85 7ed212cf5758e7ef07ea38616748ef2ae7685952bca8a557bf10ed4b0897736b dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
c1777e9aec4586f87c8db6c4e45d8141ここで停止16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68


jQuery コード:

コードをコピー コードは次のとおりです: $("ボタン").click(function(){

$("div").each(function(index,domEle){

$(domEle).css("背景色","小麦"); if($(this).is("#stop")){
$("span").text("div ブロック #" インデックス "."); false を返します
}
});


または、次のように書いてください:

コードをコピー

コードは次のとおりです: $("ボタン").click(function(){ $("div").each(function(index){ $(this).css("backgroundColor","小麦"); if($(this).is("#stop")){

$("span").text("div ブロック #" インデックス "."); false を返します

}
});


イラスト:



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

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




コードをコピー


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

$("ボタン").click(function(){ $("li").each(function(){ アラート($(this).text()) }); });

例

obj オブジェクトは配列ではありません

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

コードをコピー

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

jQuery.each=function( obj, fn, args ) { if (引数) { if ( obj.length == 未定義 ){ for (obj の var i) fn.apply(obj, args ); }その他{

for ( var i = 0, ol = obj.length; i if ( fn.apply( obj, args ) === false )
休憩
}
}
} else {
if ( obj.length == 未定義 ) {
for (obj の var i)
fn.call( obj, i, obj ); }その他{
for ( var i = 0, ol = obj.length, val = obj[0]; i

}
}
オブジェクトを返します
}


各メソッドにおける fn の具体的な呼び出し方法は、単純な fn(i, val) や fn(args) ではなく、fn.call(val,i,val) または fn.apply(obj .args) であることに注意してください。つまり、独自の fn 実装では、このポインタを直接使用して配列またはオブジェクトのサブ要素を参照できます。

では、それぞれからどのように飛び出すのか
jquery が選択したオブジェクトを走査するときにそれぞれを使用すると便利です。条件を満たすオブジェクトを見つけた後、このループから抜け出す必要があるアプリケーションがあります。
JavaScript でループを抜け出すには、一般的に
を使用します。 同僚がこの問題に遭遇したとき、彼は無意識のうちに休憩を利用してこのサイクルから抜け出しました。結果はエラーです
構文エラー: ラベルのないブレークはループまたはスイッチ
内にある必要があります 確認したら、1 つ使用する必要があります
コールバック関数で false を返すだけです。ほとんどの JQ メソッドは次のようになります

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

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