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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery中event.target和this的区别详解
Aug 13 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 执行系统命令的方法
2009/07/07 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
高中生毕业自我鉴定
2013/10/10 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
如何写好自荐信
2014/04/07 职场文书
社区护士演讲稿
2014/08/27 职场文书
小学优秀学生评语
2014/12/29 职场文书