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 相关文章推荐
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
德劲1104的电路分析与改良
2021/03/01 无线电
QueryPath PHP 中的jQuery
2010/04/11 PHP
php 文章调用类代码
2011/08/11 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
PHP微信支付实例解析
2016/07/22 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
angular分页指令操作
2017/01/09 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python语言中with as的用法使用详解
2018/02/23 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Django 返回json数据的实现示例
2020/03/05 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python使用openpyxl复制整张sheet
2021/03/24 Python
英文求职信结束语大全
2013/10/26 职场文书
工业设计专业推荐信
2013/10/29 职场文书
学生安全责任书
2014/04/15 职场文书
悬空寺导游词
2015/02/05 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
bose降噪耳机音能消除人声吗
2022/04/19 数码科技