この記事の例では、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 プログラミングに役立つことを願っています。