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实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery css实现流程进度条
Mar 26 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
Jquery Fade用法详解
Nov 06 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
10个简化PHP开发的工具
2014/12/25 PHP
详谈PHP编码转换问题
2015/07/28 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
Python日期的加减等操作的示例
2017/08/15 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python占位符输入方式实例
2019/05/27 Python
python3 求约数的实例
2019/12/05 Python
Python验证码截取识别代码实例
2020/05/16 Python
高中美术教学反思
2014/01/19 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
如何写好竞聘报告
2019/04/03 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
Python基础之Socket通信原理
2021/04/22 Python
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
python中tkinter复选框使用操作
2021/11/11 Python