本文實例講述了jQuery源碼分析之jQuery.fn.each與jQuery.each用法。分享給大家供大家參考。具體分析如下：
先上例子，下面程式碼的作用是：每個選取的div元素，都會為它們加上一個red類別
$('div').each(function(index, elem){
$('div').each(function(index, elem){
$(this).addClass('red');
}
});
上面用的的.each，即jQuery.fn.each，其內部是透過jQuery.each實現的
程式碼如下:
jQuery.fn.each
先貼一下類別官方API說明，非常簡單，只有兩點要注意
上文範例裡的$(this).addClass('red')，其中，this指的是目前操作的dom元素
each中傳入的方法，可以傳回任意值，當傳回的值為false時，跳出目前循環操作
程式碼如下:
/**
* @description 對jQuery物件中，相符的的每個dom元素執行一個方法
* @param {Number} index 目前處理元素在集合中的位置
* @param {DOMElement} Element 目前處理的dom元素
*/
.
.each( function(index, Element) )
下面舉兩個簡單的例子
例子一：
為頁面所有的div元素新增red類別
程式碼如下:
$('div').each(function(index, elem){
$('div').each(function(index, elem){
$(this).addClass('red');
}
});
例二
程式碼如下:
$('div').each(function(index, elem){
$('div').each(function(index, elem){
if(index>=5) return false; // 跳出迴圈
$(this).addClass('red');
}
});
如上，用法蠻簡單，不贅述，詳細可查看 http://api.jquery.com/each/
源碼內部是透過jQuery.each實現的，下面就講下jQuery.each的源碼，講完jQuery.each的源碼，jQuery.fn.each的源碼就很簡單了
jQuery.each：
程式碼如下:
$.each([52, 97], function(index, value) {
alert(index ': ' value ':' this);
}
});
輸出內容如下：
0: 52-52
1
1: 97-97
類別官方API說明
同樣有兩個注意點
上面例子中的this，是集合中的元素，即下面的 valueOfElement
在callback中回傳false，可以跳出循環
複製程式碼
程式碼如下:
/**
* @description 對集合（陣列或物件）中的每個元素，執行某個運算
* @param {Number|String} indexInArray 元素在集合中對應的位置（如集合為數組，則為數字；如集合為對象，則為鍵值）
* @param {AnyValue} valueOfElement 集合中的元素
*/
j
jQuery.each( collection, callback(indexInArray, valueOfElement) )
程式碼如下:
$.each( ['one,'two','three', 'four '], function(index, value){
if(index >= 2) return false;
alert( "Index:" index ", value: " value );
}
});
例二
從官網直接copy來的例子，湊合著看
$.each( { name: "John", lang: "JS" }, function(k, v){
alert( "Key: " k ", Value: " v );
}
});
原始碼：
// args is for internal usage only
e
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj ); // obj是不是類似數組的對象，例如{'0':'hello', '1':'world', 'length':2}，其實就是為jQuery對象服務啦
if ( args ) { // args，其實沒發現這個參數有什麼實際作用~~直接跳過看else裡面的內容即可，除了callback傳的參數不同外無其他區別
if ( isArray ) {
for ( ; i
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isArray ) { // 處理陣列
for ( ; i
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} else { // 處理對象
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] ); // value 為callback的回傳值
if ( value === false ) { // 注意這裡，當value===false的時候，直接跳出循環了
break;
}
}
}
}
return 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程式碼很簡單，但也扮演了相當重要的作用，jQuery裡大量用到了這兩個方法，舉例：
jQuery.each("Boolean Number String Function Array Date RegExp sp( " "), function(i, name) {
class2type[ "[object " name "]" ] = name.toLowerCase();
}
});
所以，好好掌握each！
希望本文所述對大家的jQuery程式設計有所幫助。
