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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JQuery的加载和选择器用法简单示例
May 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
隐藏你的.php文件的实现方法
2007/03/19 PHP
PHP 编程安全性小结
2010/01/08 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
js玩一玩WSH吧
2007/02/23 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
jQuery操作cookie
2016/08/08 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
在Django中创建第一个静态视图
2015/07/15 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
带你认识Django
2019/01/15 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
股东出资证明书范例
2014/10/04 职场文书
文艺晚会开场白
2015/05/29 职场文书