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 コード:

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

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


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

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

<ボタン>色を変更 <スパン>

ここで停止

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」を使用するのと同じです)。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。