jQuery.each使用詳解

jQuery.each方法是jQuery的核心工具方法之一，通用例遍方法，可用於例遍物件和陣列。不同於例遍 jQuery 物件的 $().each() 方法，此方法可用於例遍任何物件。通常需要兩個參數

object:需要例遍的物件或陣列。

callback:每個成員/元素執行的回呼函數。

回呼函數有兩個參數：第一個為物件的成員或陣列的索引，第二個為對應變數或內容。如果需要退出 each 循環可使回呼函數傳回 false，其它傳回值將被忽略。

例遍數組，同時使用元素索引和內容。舉例如下：

//例遍对象，同时使用成员名称和变量内容。
 
$.each( [0,1,2], function(i, n){
 alert( "Item #" + i + ": " + n );
});
//例遍对象，同时使用成员名称和变量内容。
 
$.each( { name: "John", lang: "JS" }, function(i, n){
 alert( "Name: " + i + ", Value: " + n );
});

   

當然也可以直接使用實例呼叫

$( 'div' ).each( function(i,n){
  return i+n.text;
} )

   

其實在源碼中執行方法（即是靜態方法中模擬方法的可，實例呼叫只不過是靜態方法使用中的一個特例罷了。

// Execute a callback for every element in the matched set.
  // (You can seed the arguments with an array of args, but this is
  // only used internally.)
  each: function( callback, args ) {
    return jQuery.each( this, callback, args );
  },

   

在原型方法中直接把this物件當作待遍歷的物件傳入，下面是靜態方法的原始碼

// args is for internal usage only
  each: function( object, callback, args ) {
    var name, i = 0,
      length = object.length,
      isObj = length === undefined || jQuery.isFunction( object );
    if ( args ) {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.apply( object[ name ], args ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.apply( object[ i++ ], args ) === false ) {
            break;
          }
        }
      }
 
    // A special, fast, case for the most common use of each
    } else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }
 
    return object;
  },

   

就要注意了在我們經常使用的手冊中一般是寫的兩個參數的我們一般使用也是使用兩個參數，但是其實在源碼中是有3個參數可以接受的，其中第三個參數是一個數組，會作為回呼函數的參數傳入。

首先聲明幾個變量，i、name和length是為循環做​​準備的，isObj是為了區分待便利的參數是數組還是對象，通過判斷該參數如果是函數或者length屬性不存在來判斷是對象，其他的就按數組或類別數組來處理。

isObj = length === undefined || jQuery.isFunction( object );
這一句寫的很精簡利用運算符的優先順序先執行===

其實這樣的判斷並不是很精確只是一個大致的區分，例如：

var obj={length:'a'};
var isObj= obj.length=== undefined || jQuery.isFunction( obj );
alert(isObj); //false

   

然後是根據是否添加第三個參數進行區分，先看下沒有添加的情況也就是

} else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

   

數組使用for循環，對於物件採用for...in循環，每循環一此就會執行一次回調函數並把當前循環的數組或者對象鍵和值傳進去，這裡使用的call方法，第一個參數是函數的「this」也就是把目前循環的值當作this後面兩個是鍵和值或是指標和值，所以我們使用迴圈中使用回呼函數的第二個參數跟使用this是一樣的。例如：

//刚才的例子
 $( 'div' ).each( function(i,n){
    return i+n.text;
  } )
//等价于
 $( 'div' ).each( function(i,n){
    return i+this.text;
  } )

   

  對於增加了第三個參數的情況而言就是改變了回呼函數的傳值方式，使用的是apply方法來傳遞參數，this指向的依然是當前值只不過把args也就是第三個參數數組傳遞進去，這個數組有多少參數那麼回調函數就有多少參數可以用，這裡要注意的是第三個一定是js原聲數組形式不能是類數組或者jQuery對象否則會報錯因為apply方法不支援。如果回呼函數回傳false那麼將跳過循環例如我們可以只處理奇數下標數組是可以判斷是偶數項時在回調函數中執行return false即可

return object;

最後返回原始對像或者數組等

以上所述就是本文的全部內容了，希望大家能夠喜歡。

更多jQuery.each使用詳解相關文章請關注PHP中文網！