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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现全选按钮
Jan 01 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中随机显示图片的函数代码
2011/06/23 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
JavaScript中的私有成员
2006/09/18 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
django orm模块中的 is_delete用法
2020/05/20 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
失业者真诚求职信范文
2013/12/25 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
简历中的自我评价范文
2014/02/05 职场文书
高中学生期末评语
2014/04/25 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
Python使用pyecharts控件绘制图表
2022/06/05 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android