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