深入理解jQuery中的each方法
阿新 • • 發佈:2018-02-04
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的原型不理解可以先閱讀
深入理解jQuery中的each方法