相思资源网 Design By www.200059.com

语法:

$.each( collection, callback(indexInArray, valueOfElement) ) 

值得一提的是,forEach 可以很方便的遍历数组和 NodeList ,jQuery 中的 jQuery 对象本身已经部署了这类遍历方法,而在原生 JavaScript 中则可以使用 forEach 方法,但是 IE 并不支持,因此我们可以手动把 forEach 方法部署到数组和 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()函数则更加强大。$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。
其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。

例1:传入数组

<!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:如果一个映射作为集合使用,回调函数每次传入一个键-值对

<!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:回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用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" ];//数组 

  var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象 

  jQuery.each(arr, function() { // this 指定值 

   $(“#” + this).text(“Mine is ” + this + “.”); // this指向为数组的值, 如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(),遍历,JavaScript,js

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jQuery中$.each()函数的用法引申实例”

暂无jQuery中$.each()函数的用法引申实例的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。