jquery的$().each和$.each的区别


Posted in jQuery onJanuary 18, 2019

$(selector).each(function(index,element))

这个函数和之前项目里面用到的遍历数据的函数不是同一个呀(项目里面用到的函  数:$.each(dataresource,function(index,element))),于是,就好好研究了下,果然在JS里面有两个相似的函数,于是也就有了今天的主题:

 1.$(selector).each(function(index,element))

 2.$.each(dataresource,function(index,element))

接下来就对这两个函数做深入的探讨:

1.$(selector).each(function(index,element))

作用:在dom处理上面用的较多

<ul id="each_id">
    <li>muzi</li>
    <li>digbig</li>
    <li>muzidigbig</li>
  </ul>

js遍历函数:

function traversalDOM(){
    $("#each_id li").each(function(){
       alert($(this).text())
    });
  }
  traversalDOM();

输出结果:

jquery的$().each和$.each的区别

2.$.each(dataresource,function(index,element))

作用:在数据处理上用的比较多

示例:

此处没有html代码,只有js代码,如下:

function traversalData(){
    var jsonResourceList = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"}]';
    if(jsonResourceList.length >0){
      $.each(JSON.parse(jsonResourceList), function(index, currentObj) {
        alert(currentObj.tagName);
      });
    }
  }
  traversalData()

jquery的$().each和$.each的区别

3.最终结论:

在遍历DOM时,通常用$(selector).each(function(index,element))函数;

在遍历数据时,通常用$.each(dataresource,function(index,element))函数。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jquery层次选择器的介绍
Jan 18 #jQuery
jQuery无冲突模式详解
Jan 17 #jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
Jquery获取radio选中值实例总结
Jan 17 #jQuery
jquery获取img的src值实例介绍
Jan 16 #jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 #jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 #jQuery
You might like
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
nginx配置React静态页面的方法教程
2017/11/03 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
基于vue、react实现倒计时效果
2019/08/26 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python定位xpath 节点位置的方法
2019/08/27 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python为什么要安装到c盘
2020/07/20 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
节能减耗标语
2014/06/21 职场文书
医院科室评语
2015/01/04 职场文书
英文邀请函
2015/02/02 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
解约证明模板
2015/06/19 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB