jQuery ソース コード分析 jQuery.fn.each および jQuery.each use_jquery

この記事の例では、jQuery ソース コード分析における jQuery.fn.each と jQuery.each の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

次のコードの機能は、選択した各 div 要素に赤いクラスを追加することです。

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

$('div').each(function(index, elem) {

$(this).addClass('red');
}
});

上記で使用されている .each は jQuery.fn.each で、jQuery.each を通じて内部的に実装されています

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

jQuery.fn.each

まずは公式の API 説明を載せておきます。注意点は 2 つだけです。
上の例の $(this).addClass('red') は、現在操作されている dom 要素を指します
それぞれに渡されるメソッドは任意の値を返すことができ、戻り値が false の場合は、現在のループ操作から抜け出します。

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

/**

* @description jQuery オブジェクト内の一致する dom 要素ごとにメソッドを実行します

* @param {Number} インデックス コレクション内の現在処理されている要素の位置

* @param {DOMElement} 要素 現在処理されている dom 要素

*/
.
.each( function(index, Element) )

以下に 2 つの簡単な例を示します
例 1:

ページ上のすべての div 要素に red クラスを追加します

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

$('div').each(function(index, elem) {

$(this).addClass('red');
}
});

例 2
ページの最初の 5 つの div 要素に red クラスを追加します

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

$('div').each(function(index, elem) {

If(index>=5) return false // ループから抜け出します
$(this).addClass('red');
}
});

使い方は上記の通り非常に簡単なので割愛します。詳しくは http://api.jquery.com/each/
をご覧ください。 内部ソース コードは jQuery.each を通じて実装されます。jQuery.each のソース コードについて話した後、jQuery.fn.each のソース コードは非常に単純です。

jQuery.each:

まず簡単な例を見てみましょう

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

$.each([52, 97], function(index, value) ) {

alert(インデックス ': ' 値 ':' this);
}
});

出力内容は以下のとおりです:
0:52-52

1
1:97-97

クラスの公式 API の説明

注意点も2つあります

上記の例では、これはコレクション内の要素、つまり次の valueOfElement

ループを抜け出すにはコールバックで false を返します

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

/**

* @description コレクション内の各要素 (配列またはオブジェクト) に対して操作を実行します

* @param {Number|String} indexInArray コレクション内の要素の対応する位置 (コレクションが配列の場合は数値、コレクションがオブジェクトの場合はキー値)

* @param {AnyValue} valueOfElement コレクション
内の要素
*/
j
jQuery.each( collection, callback(indexInArray, valueOfElement) )

例 1

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

$.each( ['one,'two','three' , 'four '], function(index, value){

If(index >= 2) return false;

alert( "インデックス:" インデックス ", 値: " 値 );
}
});

例 2

サンプルは公式 Web サイトから直接コピーしたものなので、そのまま使用してください

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

$.each( { name: "John", lang: "JS " }, function(k, v){

alert( "キー: " k "、値: " v );
}
});

ソースコード:

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

// args は内部使用のみです
え
各: function( obj, callback, args ) {

var 値、

i = 0,

長さ = obj.length,

isArray = isArraylike( obj ); // obj は、実際に jQuery オブジェクトを提供する、{'0':'hello', '1':'world', 'length':2} などの配列のようなオブジェクトです

If ( args ) { // args、実際にはこのパラメータの実際の効果は見つかりませんでした~~ スキップしてelseの内容を見てください。コールバックで渡されるパラメータが異なること以外に違いはありません。
if ( isArray ) {
for ( ; i value = callback.apply( obj[ i ], args );
If ( value === false ) {
休憩;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
If ( value === false ) {
休憩;
}
}
}
// それぞれの最も一般的な使用のための、特別で高速なケース
} else {
if ( isArray ) { RM for ( ; i value = callback.call( obj[ i ], i, obj[ i ] );
If ( value === false ) {
休憩;
}
}
} Else {// 処理オブジェクト
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] ) // value はコールバック
の戻り値です。 If (value === false) {// ここで、value === false の場合、サイクルから直接ジャンプすることに注意してください
休憩;
}
}
}
}
obj を返します;
}
}、



最新の jQuery.fn.each ソース コード:

jQuery.each を理解していれば、特に話すことはありません。

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

each: function( callback, args ) {

return jQuery.each( this, callback, args );
}
}、

結論

jQuery.extend および jQuery.fn.extend と同様に、jQuery.each および jQuery.fn.each のコードは非常に単純ですが、これら 2 つのメソッドも jQuery で広く使用されています。例:

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

jQuery.each("Boolean Number String Function Array Date RegExp Object Error" .split( " "), function(i, name) {

Class2type[ "[object " name "]" ] = name.toLowerCase();
}
});

さあ、それぞれをマスターしましょう！

この記事が皆さんの jQuery プログラミングに役立つことを願っています。