JQuery中each()的使用方法說明

JQuery中的each函數在1.3.2的官方文檔中的描述以下，each是jquery下比較實用的遍歷函數。each()函數是基本上全部的框架都提供了的一個工具類函數，經過它，你能夠遍歷對象、數組的屬性值並進行處理。

jQuery和jQuery對象都實現了該方法，對於jQuery對象，只是把each方法簡單的進行了委託：把jQuery對象做爲第一個參數傳遞給 jQuery的each方法.換句話說：jQuery提供的each方法是對參數一提供的對象的中全部的子元素逐一進行方法調用。而jQuery對象提供 的each方法則是對jQuery內部的子元素進行逐個調用。

複製代碼 代碼以下:

jQuery.prototype.each=function( fn, args ) {
return jQuery.each( this, fn, args );
}

讓咱們看一下jQuery提供的each方法的具體實現，

jQuery.each(obj,fn,arg)

該方法有三個參數:進行操做的對象obj，進行操做的函數fn，函數的參數args。

讓咱們根據ojb對象進行討論：

1.obj對象是數組

each 方法會對數組中子元素的逐個進行fn函數調用，直至調用某個子元素返回的結果爲false爲止，也就是說，咱們能夠在提供的fn函數進行處理，使之知足一 定條件後就退出each方法調用。當each方法提供了arg參數時，fn函數調用傳入的參數爲arg，不然爲：子元素索引，子元素自己

2.obj 對象不是數組

該方法同1的最大區別是：fn方法會被逐次不考慮返回值的進行進行。換句話說，obj對象的全部屬性都會被fn方法進行調用，即便fn函數返回false。調用傳入的參數同1相似。

複製代碼 代碼以下:

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply( obj, args ) === false )
break;

}

}
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){}

}
}
return obj;
}

需 要特別注意的是each方法中fn的具體調用方法並非採用簡單的fn(i,val)或fn(args),而是採用了 fn.call(val,i,val)或fn.apply(obj.args)的形式，這意味着，在你本身的fn的實現中，能夠直接採用this指針引用 數組或是對象的子元素。這種方式是絕大多數jQuery所採用的一種實現方式。

在jQuery裏有一個each方法，用起來很是的爽，不用再像原來那樣寫for循環，jQuery源碼裏本身也有不少用到each方法。

其實jQuery裏的each方法是經過js裏的call方法來實現的。

下面簡單介紹一下call方法。

call這個方法很奇妙，其實官方的說明是：「調用一個對象的一個方法，以另外一個對象替換當前對象。」網上更多的解釋是變換上下文環境，也有說是改變上下文this指針。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

參數

thisObj

可選項。將被用做當前對象的對象。

arg1, arg2, , argN

可選項。將被傳遞方法參數序列。

說明

call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

引用網上有一個很經典的例子

Js代碼

複製代碼 代碼以下:

function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);

用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);

注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

具體call更深刻的就不在這裏提了。

下面提一下jQuery的each方法的幾種經常使用的用法

Js代碼

複製代碼 代碼以下:

var arr = [ "one", "two", "three", "four"];

$.each(arr, function(){

alert(this);

});

//上面這個each輸出的結果分別爲：one,two,three,four

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]

$.each(arr1, function(i, item){

alert(item[0]);

});

//其實arr1爲一個二維數組，item至關於取每個一維數組，

//item[0]相對於取每個一維數組裏的第一個值

//因此上面這個each輸出分別爲：1 4 7

var obj = { one:1, two:2, three:3, four:4};

$.each(obj, function(key, val) {

alert(obj[key]);

});

//這個each就有更厲害了，能循環每個屬性

//輸出結果爲：1 2 3 4

原文出自：http://www.jb51.net/article/22626.htm