欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中$.each()函數(shù)的用法引申實(shí)例

 更新時(shí)間：2016年05月12日 16:16:11   作者：天梯夢(mèng)  
jQuery中的$.each()函數(shù)比forEach更加強(qiáng)大,可以用來遍歷JavaScript中的任意集合,借來下來我們會(huì)舉幾個(gè)jQuery中$.each()函數(shù)的用法引申實(shí)例,首先先來回顧一下遍歷用法的基礎(chǔ):

語(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

相關(guān)文章

最新評(píng)論