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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 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 手机归属地查询 api
2010/02/08 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP制作万年历
2015/01/07 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
javascript引导程序
2008/10/26 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python处理CSV与List的转换方法
2018/04/19 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
档案室主任岗位职责
2014/02/12 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
运动会200米广播稿
2015/08/19 职场文书
导游词之青城山景区
2019/09/27 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python