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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
javascript 用函数实现继承详解
May 28 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 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
PHP4之COOKIE支持详解
2006/10/09 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
javascript 写类方式之五
2009/07/05 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
Python入门篇之面向对象
2014/10/20 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
浅析Django中关于session的使用
2019/12/30 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
世界地球日活动总结
2015/02/09 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
保姆聘用合同
2015/09/21 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server