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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP文件与目录操作示例
2016/12/24 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python字典简介以及用法详解
2016/11/15 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
Unix控制后台进程都有哪些进程
2016/09/22 面试题
入党积极分子自我鉴定范文
2014/03/25 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
出国留学导师推荐信
2015/03/26 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技