jQuery.each使用詳解
jQuery.each方法是jQuery的核心工具方法之一,通用例遍方法,可用于例遍對象和數(shù)組。不同于例遍 jQuery 對象的 $().each() 方法,此方法可用于例遍任何對象。通常需要兩個參數(shù)
object:需要例遍的對象或數(shù)組。
callback:每個成員/元素執(zhí)行的回調(diào)函數(shù)。
回調(diào)函數(shù)擁有兩個參數(shù):第一個為對象的成員或數(shù)組的索引,第二個為對應(yīng)變量或內(nèi)容。如果需要退出 each 循環(huán)可使回調(diào)函數(shù)返回 false,其它返回值將被忽略。
例遍數(shù)組,同時使用元素索引和內(nèi)容。舉例如下:
//例遍對象,同時使用成員名稱和變量內(nèi)容。 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); //例遍對象,同時使用成員名稱和變量內(nèi)容。 $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
當然也可以直接使用實例調(diào)用
$( 'div' ).each( function(i,n){ return i+n.text; } )
其實在源碼中實例(原型)方法也是調(diào)用的靜態(tài)方法,所以分析each方法只需要分析其靜態(tài)方法即可,實例調(diào)用只不過是靜態(tài)方法使用中的一個特例罷了。
// 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對象當作待遍歷的對象傳入,下面是靜態(tài)方法的源碼
// 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個參數(shù),這個時候就要注意了在我們經(jīng)常使用的手冊中一般是寫的兩個參數(shù)的我們一般使用也是使用兩個參數(shù),但是其實在源碼中是有3個參數(shù)可以接受的,其中第三個參數(shù)是一個數(shù)組,會作為回調(diào)函數(shù)的參數(shù)傳入。
首先聲明幾個變量,i、name和length是為循環(huán)做準備的,isObj是為了區(qū)分待便利的參數(shù)是數(shù)組還是對象,通過判斷該參數(shù)如果是函數(shù)或者length屬性不存在來判斷是對象,其他的就按數(shù)組或者類數(shù)組來處理。
isObj = length === undefined || jQuery.isFunction( object );
這一句寫的很精簡利用運算符的優(yōu)先順序先執(zhí)行===
其實這樣的判斷并不是很精準只是一個大致的區(qū)分,比如:
var obj={length:'a'}; var isObj= obj.length=== undefined || jQuery.isFunction( obj ); alert(isObj); //false
然后就是根據(jù)是否添加第三個參數(shù)進行區(qū)分,先看下沒有添加的情況也就是
} 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; } } } }
根據(jù)isObj變量“區(qū)分”數(shù)組和對象,對于數(shù)組使用for循環(huán),對于對象采用for...in循環(huán),每循環(huán)一此就會執(zhí)行一次回調(diào)函數(shù)并把當前循環(huán)的數(shù)組或者對象鍵和值傳進去,這里使用的call方法,第一個參數(shù)是函數(shù)的“this”也就是把當前循環(huán)的值作為this后面兩個是鍵和值或者是指針和值,所以我們使用循環(huán)中使用回調(diào)函數(shù)的第二個參數(shù)跟使用this是一樣的。比如:
//剛才的例子 $( 'div' ).each( function(i,n){ return i+n.text; } ) //等價于 $( 'div' ).each( function(i,n){ return i+this.text; } )
對于添加了第三個參數(shù)的情況而言就是改變了回調(diào)函數(shù)的傳值方式,使用的是apply方法來傳遞參數(shù),this指向的依然是當前值只不過把args也就是第三個參數(shù)數(shù)組傳遞進去,這個數(shù)組有多少參數(shù)那么回調(diào)函數(shù)就有多少參數(shù)可以用,這里需要注意的是第三個一定是js原聲數(shù)組形式不能是類數(shù)組或者jQuery對象否則會報錯因為apply方法不支持。如果回調(diào)函數(shù)返回false那么將跳過循環(huán)比如我們可以只處理奇數(shù)下標數(shù)組是可以判斷是偶數(shù)項時在回調(diào)函數(shù)中執(zhí)行return false即可
return object;
最后返回原對象或者數(shù)組等
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- JavaScript使用forEach()與jQuery使用each遍歷數(shù)組時return false 的區(qū)別
- jQuery的Each比JS原生for循環(huán)性能慢很多的原因
- jQuery通用的全局遍歷方法$.each()用法實例
- 淺談jquery中的each方法$.each、this.each、$.fn.each
- jQuery篩選數(shù)組之grep、each、inArray、map的用法及遍歷json對象
- jQuery使用each方法與for語句遍歷數(shù)組示例
- jquery 遍歷數(shù)組 each 方法詳解
- jQuery中each()、find()和filter()等節(jié)點操作方法詳解(推薦)
- jQuery使用$.each遍歷json數(shù)組的簡單實現(xiàn)方法
- jquery使用each方法遍歷json格式數(shù)據(jù)實例
- 深入理解jquery中的each用法
相關(guān)文章
jquery formValidator插件ajax驗證 內(nèi)容不做任何修改再離開提示錯誤的bug解決方法
query formValidator插件非常好用,但是有一個嚴重的Bug,在使用ajax驗證的時候,如果輸入框的內(nèi)容已經(jīng)存在,把鼠標放到輸入框,不做任何修改再離開,則會提示錯誤,很是郁悶2013-01-01jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
有時候我們需要讀取JSON格式的數(shù)據(jù)文件,在jQuery中可以使用Ajax或者 $.getJSON()方法實現(xiàn),下面有個不錯的示例,需要的朋友可以參考下2013-11-11根據(jù)Bootstrap Paginator改寫的js分頁插件
本文主要對根據(jù)Bootstrap Paginator改寫的js插件進行詳細介紹,具有很好的參考價值,需要的朋友一起來看下吧2016-12-12JQuery搜索框自動補全(模糊匹配)功能實現(xiàn)示例
這篇文章主要介紹了JQuery搜索框自動補全(模糊匹配)功能實現(xiàn)示例沒使用JQuery UI的autocomplete插件,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01