jQuery中$.each()函數(shù)的用法引申實例
語法：
$.each( collection, callback(indexInArray, valueOfElement) )
值得一提的是，forEach 可以很方便的遍歷數(shù)組和 NodeList ，jQuery 中的 jQuery 對象本身已經(jīng)部署了這類遍歷方法，而在原生 JavaScript 中則可以使用 forEach 方法，但是 IE 并不支持，因此我們可以手動把 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ù)則更加強大。$.each()函數(shù)和$(selector).each()不一樣。$.each()函數(shù)可以用來遍歷任何一個集合，不管是一個JavaScript對象或者是一個數(shù)組，如果是一個數(shù)組的話，回調(diào)函數(shù)每次傳遞一個數(shù)組的下標和這個下標所對應的數(shù)組的值（這個值也可以在函數(shù)體中通過this關鍵字獲取，但是JavaScript通常會把this這個值當作一個對象即使他只是一個簡單的字符串或者是一個數(shù)字），這個函數(shù)返回所遍歷的對象，也就是這個函數(shù)的第一個參數(shù)，注意這里還是原來的那個數(shù)組，這是和map的區(qū)別。
其中collection代表目標數(shù)組，callback代表回調(diào)函數(shù)（自己定義），回調(diào)函數(shù)的參數(shù)第一個是數(shù)組的下標，第二個是數(shù)組的元素。當然我們也可以給回調(diào)函數(shù)只設定一個參數(shù)，這個參數(shù)一定是下標，而沒有參數(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：如果一個映射作為集合使用,回調(diào)函數(shù)每次傳入一個鍵-值對
<!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時可以退出$.each(), 如果返回一個非false 即會像在for循環(huán)中使用continue 一樣, 會立即進入下一個遍歷
<!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 }; // 對象
jQuery.each(arr, function() { // this 指定值
$(“#” + this).text(“Mine is ” + this + “.”); // this指向為數(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()遍歷元素學習筆記
- jquery中each遍歷對象和數(shù)組示例
- JQuery $.each遍歷JavaScript數(shù)組對象實例
- jquery進行數(shù)組遍歷如何跳出當前的each循環(huán)
- jquery使用each方法遍歷json格式數(shù)據(jù)實例
- jQuery $.each遍歷對象、數(shù)組用法實例
- jQuery使用$.each遍歷json數(shù)組的簡單實現(xiàn)方法
- jquery 遍歷數(shù)組 each 方法詳解
- jQuery通用的全局遍歷方法$.each()用法實例
相關文章
JQuery為textarea添加maxlength屬性的代碼
textarea默認不支持maxlength屬性。所以通過jquery實現(xiàn)下。具體的看代碼。2010-04-04
jQuery.validate.js API說明2010-07-07
javascript（基于jQuery）實現(xiàn)鼠標獲取選中的文字示例【測試可用】
這篇文章主要介紹了javascript（基于jQuery）實現(xiàn)鼠標獲取選中的文字,涉及jQuery響應鼠標事件及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-10-10
通過實例比較一下使用 XMLHttpRequest和使用fetch之間的不同，這篇文章主要介紹了你不需要jQuery(三) 新AJAX方法fetch()2016-06-06
這篇文章主要介紹了JQuery球隊選擇實現(xiàn)方法,實例分析了jQuery中鼠標事件與頁面元素相關操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了jquery實現(xiàn)百葉窗效果，利用li的定位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
jQuery使用zTree插件實現(xiàn)樹形菜單和異步加載
這篇文章主要介紹了jQuery使用zTree插件實現(xiàn)樹形菜單和異步加載的相關方法，感興趣的小伙伴們可以參考一下2016-02-02
Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼
對于習慣使用GridView的人來說，前臺頁面需要動態(tài)添加表格的行數(shù)，是一件痛苦的事。GridView處理這種事情相當麻煩，你點擊“新增一行”，需要回傳到服務器。2010-09-09
這是一個基于jquey寫的倒計時。當然代碼有點小改動，只是改了一下展示效果。2014-05-05
本篇文章分享了基于jQuery實現(xiàn)背景滑動菜單的實例代碼。感興趣的朋友可以下載實例運行，下面就跟小編一起來看看吧2016-12-12