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


Posted in Javascript onMay 12, 2016

语法:

$.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

Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
javascript 有用的脚本函数
May 07 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
javascript内置对象操作详解
Feb 04 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 #Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 #Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 #Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 #Javascript
深入浅析JavaScript中with语句的理解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 #Javascript
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php验证码生成代码
2015/11/11 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
python如何在终端里面显示一张图片
2016/08/17 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python 获取字典键值对的实现
2020/11/12 Python
Python对excel的基本操作方法
2021/02/18 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
建筑工程专业毕业生自荐信
2013/10/19 职场文书
软件工程师岗位职责
2013/11/16 职场文书
个人自荐书
2013/12/20 职场文书
高中军训感言400字
2014/02/24 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书