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实现前端分页功能
Mar 23 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery传参及获取方式(两种方式)
Feb 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中的多态性[译]
2011/08/02 PHP
php 发送带附件邮件示例
2014/01/23 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
pycharm实现猜数游戏
2020/12/07 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
党员岗位承诺书
2014/03/25 职场文书
项目建议书怎么写
2014/05/15 职场文书
我是特种兵观后感
2015/06/11 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang