jquery_jquery での $each() メソッドの使用ガイド-jsチュートリアル-php.cn

jquery_jquery での $each() メソッドの使用ガイド

WBOY

リリース： 2016-05-16 16:01:41

オリジナル

1312 人が閲覧しました

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

each() メソッドを使用すると、DOM ループ構造が簡潔になり、エラーが発生しにくくなります。 each() 関数は非常に強力なトラバーサル関数をカプセル化しており、1 次元配列、多次元配列、DOM、JSON などをトラバースできます。
JavaScript 開発プロセス中に $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

を出力します

それぞれ 2 次元配列を処理します

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

ログイン後にコピー

arr2 は 2 次元配列であり、item はこの 2 次元配列内の各配列を取得することと同等です。
item[0] は、各 1 次元配列
の最初の値の取得に関連しています。この 2 次元配列には 3 つの配列要素
が含まれているため、alert(i) は 0、1、2 を出力します。 alert(item) は ['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) は 1、1、2、2、3、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 を出力します。
を使用すると、同じ結果が出力されます。

上記のコードを次の形式に変更すると

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

ログイン後にコピー

ご覧のとおり、出力結果は同じです。 2 つの書き方の違いについては、まだわかりません。この変更を上記の配列操作に適用すると、同じ結果が生成されます。

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

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

jQuery でのそれぞれの実装を見てください (インターネットからの抜粋)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
var name, i = 0,length = object.length;
if (args) {
if (length == undefined) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
} else {
if (length == undefined) {
for (name in object) {
if (callback.call(object[name], name, object[name]) === false) {
break;
}
}
} else {
for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
/*object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
其中callback是类似于 function(index, elem) { ... } 的方法。
所以就得到 $("...").each(function(index, elem){ ... });
*/
}
}
return object;
}

ログイン後にコピー

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

1.obj オブジェクトは配列です

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

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

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

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