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轻松实现无缝轮播效果
Mar 22 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 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
phpmyadmin的#1251问题
2006/11/25 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
高中军训感言400字
2014/02/24 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
单位授权委托书范本
2014/09/26 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
2014年党务公开工作总结
2014/12/09 职场文书