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+pjax简单示例汇总
Apr 21 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jquery实现上传图片功能
Jun 29 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jquery实现抽奖功能
Oct 22 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP 危险函数全解析
2009/09/09 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
JS实现纸牌发牌动画
2021/01/19 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
一个超级简单的python web程序
2014/09/11 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python生成器用法实例详解
2019/11/22 Python
python 实现目录复制的三种小结
2019/12/04 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
业务主管岗位职责范本
2013/12/25 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
党校学习自我鉴定
2014/02/24 职场文书
北体毕业生求职信
2014/02/28 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
人口与计划生育责任书
2015/05/09 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
Docker下安装Oracle19c
2022/04/13 Servers