jQuery中$.each()函數(shù)的用法引申實(shí)例
語(yǔ)法:
$.each( collection, callback(indexInArray, valueOfElement) )
值得一提的是,forEach 可以很方便的遍歷數(shù)組和 NodeList ,jQuery 中的 jQuery 對(duì)象本身已經(jīng)部署了這類遍歷方法,而在原生 JavaScript 中則可以使用 forEach 方法,但是 IE 并不支持,因此我們可以手動(dòng)把 forEach 方法部署到數(shù)組和 NodeList 中:
if ( !Array.prototype.forEach ){ Array.prototype.forEach = function(fn, scope) { for( var i = 0, len = this.length; i < len; ++i) { fn.call(scope, this[i], i, this); } } } // 部署完畢后 IE 也可以使用 forEach 了 document.getElementsByTagName('p').forEach(function(e){ e.className = 'inner'; });
而jQuery中的$.each()函數(shù)則更加強(qiáng)大。$.each()函數(shù)和$(selector).each()不一樣。$.each()函數(shù)可以用來遍歷任何一個(gè)集合,不管是一個(gè)JavaScript對(duì)象或者是一個(gè)數(shù)組,如果是一個(gè)數(shù)組的話,回調(diào)函數(shù)每次傳遞一個(gè)數(shù)組的下標(biāo)和這個(gè)下標(biāo)所對(duì)應(yīng)的數(shù)組的值(這個(gè)值也可以在函數(shù)體中通過this關(guān)鍵字獲取,但是JavaScript通常會(huì)把this這個(gè)值當(dāng)作一個(gè)對(duì)象即使他只是一個(gè)簡(jiǎn)單的字符串或者是一個(gè)數(shù)字),這個(gè)函數(shù)返回所遍歷的對(duì)象,也就是這個(gè)函數(shù)的第一個(gè)參數(shù),注意這里還是原來的那個(gè)數(shù)組,這是和map的區(qū)別。
其中collection代表目標(biāo)數(shù)組,callback代表回調(diào)函數(shù)(自己定義),回調(diào)函數(shù)的參數(shù)第一個(gè)是數(shù)組的下標(biāo),第二個(gè)是數(shù)組的元素。當(dāng)然我們也可以給回調(diào)函數(shù)只設(shè)定一個(gè)參數(shù),這個(gè)參數(shù)一定是下標(biāo),而沒有參數(shù)也是可以的。
例1:傳入數(shù)組
<!DOCTYPE html> <html> <head> <script src=”http://code.jquery.com/jquery-latest.js”></script> </head> <body> <script> $.each([52, 97], function(index, value) { alert(index + ‘: ‘ + value); }); </script> </body> </html>
輸出:
0: 52 1: 97
例2:如果一個(gè)映射作為集合使用,回調(diào)函數(shù)每次傳入一個(gè)鍵-值對(duì)
<!DOCTYPE html> <html> <head> <script src=”http://code.jquery.com/jquery-latest.js”></script> </head> <body> <script> var map = { ‘flammable': ‘inflammable', ‘duh': ‘no duh' }; $.each(map, function(key, value) { alert(key + ‘: ‘ + value); }); </script> </body> </html>
輸出:
flammable: inflammable duh: no duh
例3:回調(diào)函數(shù)中 return false時(shí)可以退出$.each(), 如果返回一個(gè)非false 即會(huì)像在for循環(huán)中使用continue 一樣, 會(huì)立即進(jìn)入下一個(gè)遍歷
<!DOCTYPE html> <html> <head> <style> div { color:blue; } div#five { color:red; } </style> <script src=”http://code.jquery.com/jquery-latest.js”></script> </head> <body> <div id=”one”></div> <div id=”two”></div> <div id=”three”></div> <div id=”four”></div> <div id=”five”></div> <script> var arr = [ "one", "two", "three", "four", "five" ];//數(shù)組 var obj = { one:1, two:2, three:3, four:4, five:5 }; // 對(duì)象 jQuery.each(arr, function() { // this 指定值 $(“#” + this).text(“Mine is ” + this + “.”); // this指向?yàn)閿?shù)組的值, 如one, two return (this != “three”); // 如果this = three 則退出遍歷 }); jQuery.each(obj, function(i, val) { // i 指向鍵, val指定值 $(“#” + i).append(document.createTextNode(” – ” + val)); }); </script> </body> </html>
輸出 :
Mine is one. – 1 Mine is two. – 2 Mine is three. – 3 - 4 - 5
- jquery $.each()使用探討
- jquery $.each() 使用小探
- JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
- jquery中each遍歷對(duì)象和數(shù)組示例
- JQuery $.each遍歷JavaScript數(shù)組對(duì)象實(shí)例
- jquery進(jìn)行數(shù)組遍歷如何跳出當(dāng)前的each循環(huán)
- jquery使用each方法遍歷json格式數(shù)據(jù)實(shí)例
- jQuery $.each遍歷對(duì)象、數(shù)組用法實(shí)例
- jQuery使用$.each遍歷json數(shù)組的簡(jiǎn)單實(shí)現(xiàn)方法
- jquery 遍歷數(shù)組 each 方法詳解
- jQuery通用的全局遍歷方法$.each()用法實(shí)例
相關(guān)文章
jQuery Ajax使用FormData對(duì)象上傳文件的方法
這篇文章主要介紹了jQuery Ajax使用FormData對(duì)象上傳文件的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)復(fù)選框全選/取消全選/反選及獲得選擇的值
這篇文章主要介紹了jQuery實(shí)現(xiàn)的復(fù)選框全選/取消全選/反選及獲得選擇的值,需要的朋友可以參考下2014-06-06Jquery讓form表單異步提交代碼實(shí)現(xiàn)
這篇文章主要介紹了Jquery讓form表單異步提交代碼實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11JQery jstree 大數(shù)據(jù)量問題解決方法
Jquery 結(jié)合jstree 動(dòng)態(tài)生成一棵樹,如果某一節(jié)點(diǎn)下目錄超過500個(gè),IE 會(huì)提示是否允許JS腳本運(yùn)行,并且目錄加載不全,大約只加載了300左右。2010-03-03