jQuery each和js forEach用法比较


Posted in jQuery onFebruary 27, 2019

本文实例分析了jQuery each和js forEach用法。分享给大家供大家参考,具体如下:

对于遍历数组的元素,js和jquery都有类似的方法,js用的是forEach而jquery用的是each,简单举例;

var arr = new Array(["b", 2, "a", 4],["c",3,"d",6]);
arr.forEach(function(item){
  alert(item); //b, 2, a, 4和c,3,d,6
});

如果forEach里的回调函数只有一个参数则代表该集合里的元素;

var arr = new Array(["b", 2, "a", 4],["c",3,"d",6]);
arr.forEach(function(item, i){
  alert(item+"-"+i); //b, 2, a, 4-1和c,3,d,6-2;
  item.forEach(function(items, j){
    alert(items+"---------"+j); //b------0;2-------1;a----2;4------3;  c-----0;3-----1;d----2;6----3
  });
});

如果forEach里有两个参数,则第一个参数为该集合里的元素,第二个参数为集合的索引;

在jquery里则不同;

var arr = new Array(["b", 2, "a", 4],["c",3,"d",6]);
$.each(arr, function(item){
  alert(item); //0;1
});

如果回调函数里只有一个参数时,则为集合的索引;

var arr = new Array(["b", 2, "a", 4],["c",3,"d",6]);
$.each(arr, function(i, item){
  alert(item+"-"+i); //b, 2, a, 4-1和c,3,d,6-2;
  $.each(item, function(j, items){
    alert(items+"---------"+j); //b------0;2-------1;a----2;4------3;  c-----0;3-----1;d----2;6----3
  });
});

如果有两个参数,则第一个为索引,第二个该集合里的元素;

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

jQuery 相关文章推荐
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 #jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 #jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 #jQuery
You might like
php mssql 数据库分页SQL语句
2008/12/16 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
php实现登录页面的简单实例
2019/09/29 PHP
Js注册协议倒计时的小例子
2013/06/24 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python实现大文件排序的方法
2015/07/10 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python3并发写文件与Python对比
2019/11/20 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
印尼购物网站:iLOTTE
2019/10/16 全球购物
化妆品促销方案
2014/02/24 职场文书
如何写自我鉴定
2014/03/19 职场文书
加入学生会演讲稿
2014/04/24 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
土建技术员岗位职责
2015/04/11 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书