1. 程式人生 > >深入理解jQuery中的each方法

深入理解jQuery中的each方法

foreach 參數 回調 jquery function 默認 break font ++

寫在前面

我們先回顧一下數組中的forEach方法吧。在數組的實例上有個forEach方法供所有實例使用,forEach裏面接收一個回調函數,而且回調函數默認接收三個參數:當前項,索引,數組 。forEach循環有個特點,就是無論如何都會把數據遍歷完成。

each方法

each方法不僅是jQuery的靜態方法而且還是jQuery元素原型中的方法

靜態方法通過:$.each(數組或對象,函數) 這樣的形式執行,註意:數組和對象都可以作為參數哦

原型方法通過:$(匹配元素集合) .each(函數) 這樣的形式執行

其實不管是靜態方法還是原型中的方法,都是執行同一個each方法,我們來看看源代碼吧

 1 each: function( obj, callback ) {
 2         var length, i = 0;
 3 
 4         if ( isArrayLike( obj ) ) {
 5             length = obj.length;
 6             for ( ; i < length; i++ ) {
 7                 if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
 8                     break
; 9 } 10 } 11 } else { 12 for ( i in obj ) { 13 if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { 14 break; 15 } 16 } 17 } 18 19 return obj; 20 }

上面是jQuery的靜態方法,下面是原型上的方法

each: function( callback ) {
        return jQuery.each( this, callback );
    },

原型上的each方法只是把this當做參數傳入了,也就是參數obj,each方法中的還通過is ArrayLike來判斷是不是類數組,然後在循環,如果是對象也做了處理,要註意的是回調函數,如果回調函數返回false值那麽each方法將會停止遍歷,這是一個很大的區別。

如果的jQuery的原型不理解可以先閱讀

wuxianqiang/blog

深入理解jQuery中的each方法