jquery で $each() メソッドを使用するためのガイド

jQuery の each 関数は非常に便利です。$.each () 関数は、一次元配列、多次元配列、などを走査することができます。$ を使用します。 JavaScript 開発プロセス それぞれの作業負荷を大幅に軽減できます。次に、それぞれを模倣した、配列型オブジェクトのみを処理できる簡単な関数を示します。

$.each() は、$(selector).each() とは異なります。後者は、jquery オブジェクトを走査するために使用されます。前者は、配列またはオブジェクトのいずれのコレクションでも走査できます。これは配列です。コールバック関数 毎回、配列のインデックスと対応する値が渡されます (値は this キーワードを通じて取得することもできますが、JavaScript は常にこの値をオブジェクトとしてラップします。文字列または数値) の場合、メソッドは の最初のパラメーターを返します。

each() メソッドを使用すると、DOM ループ構造が簡潔になり、エラーが発生しにくくなります。 each() 関数は非常に強力なトラバーサル関数をカプセル化しており、1 次元配列、多次元配列、DOM、JSON などをトラバースできます。JavaScript 開発プロセス中に $each を使用すると、作業負荷が大幅に軽減されます。 。

ここでは

each の一般的な使用法をいくつか示します

each は 1 次元配列を処理します

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
alert(i); 
alert(val);
});

alert(i) は 0、1、2 を出力します

alert(val) は aaa、bbb、ccc を出力します

各プロセスは

二次元配列

　　var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
　　$.each(arr, function(i, item){ 
alert(i); 
alert(item); 
　　});

arr2 は二次元配列であり、 item はこの二次元配列内の各配列を取得することに相当します。

item[0] 各 1 次元配列の最初の値を取得することに対する相対値

alert(i) は 0、1、2 を出力します。この 2 次元配列には 3 つの配列要素が含まれているためです。
alert(item) は For [' を出力しますa', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']

この 2 桁の配列処理の変更

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
　　$.each(arr, function(i, item){ 
　　$.each(item,function(j,val){
　　　　 alert(j);
　　　　alert(val);
　}); 
});

alert(j)は0、1、2、0、1、2、0、1、2として出力されます

alert(val)はa、aa、aaa、b、と出力されますbb、bbb、c、cc、ccc

それぞれは json データを処理します。これはさらに強力で、すべての属性を循環できます

　　var obj = { one:1, two:2, three:3}; 
　　each(obj, function(key, val) { 
　　alert(key); 
　　alert(val); 
　　});

ここで、alert(key) は 1、2、3 を出力します

alert( val) one、1、two、2、three、3 が出力されます

ここでキーが数値ではなく属性であるのは、json 形式が順序付けされていない属性値のセットであるためです。
そして、この val は obj[key] に相当します

ecah は dom 要素を処理します。ここでは例として入力フォーム要素が使用されます。

あなたの dom にこのようなコードがあり

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

し、それぞれを次のように使用します

$.each($("input:hidden"), function(i,val){ 
alert(val);
alert(i);
alert(val.name);
alert(val.value); 
});

そして、alert(val) は [object HTMLInputElement] を出力します。フォーム要素。

alert(i) は 0、1、2、3 を出力します

alert(val.name); は aaa、bbb、ccc、ddd を出力します、this.name を使用すると同じ結果が出力されます

alert( val.value); は 111,222,333,444 を出力します。 上記のコードを次の形式に変更すると、同じ結果が出力されます。両者については、書き方の違いがまだわかりません。この変更を上記の配列操作に適用すると、同じ結果が生成されます。

このように、いくつかの事例の実際の結果が回答されました。それから勉強を続けても、何が起こっているのか、そしてなぜ起こっているのか決してわかりません。

上記の例から、jQuery と jQuery オブジェクトの両方がこのメソッドを実装していることがわかります。jQuery オブジェクトの場合、各メソッドは単に委任されており、jQuery オブジェクトは最初のパラメーターとして jQuery の各メソッドに渡されます。

jQueryでのそれぞれの実装を見てください

（ネット抜粋）

$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value); 
});

jqueryは、入ってくる要素を元に自動で判断し、その判断結果に基づいてapplyやcallメソッドを使います。 fn の実装では、このポインターを直接使用して、配列またはオブジェクトのサブ要素を参照できます。

1.obj オブジェクトは配列です。各メソッドは、特定のサブ要素を呼び出して返される結果が false になるまで、配列内のサブ要素に対して fn 関数を 1 つずつ呼び出します。提供された fn 関数を使用して処理し、特定の条件を満たした後で各メソッド呼び出しを終了できます。各メソッドが arg パラメーターを提供する場合、fn 関数呼び出しによって渡されるパラメーターは arg です。それ以外の場合: サブ要素のインデックス、サブ要素自体

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

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

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

以上がjquery で $each() メソッドを使用するためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。