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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
javascript vvorld 在线加密破解方法
Nov 13 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 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
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
遗传算法之Python实现代码
2017/10/10 Python
python的中异常处理机制
2018/08/30 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
一行python实现树形结构的方法
2019/08/09 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
文化活动实施方案
2014/03/28 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
出差报告格式模板
2014/11/06 职场文书
项目建议书
2015/02/04 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
基于Python实现西西成语接龙小助手
2022/08/05 Golang