Jquery使用each函数实现遍历及数组处理


Posted in jQuery onJuly 14, 2020

each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等

在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

下面提一下each的几种常用的用法

each处理一维数组

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]   
 $.each(arr, function(i, item){   
   
$.each(item,function(j,val){
    

 alert(j);
    

alert(val);
   }); 
});

alert(i)将输出0,1,2

alert(val)将输出aaa,bbb,ccc

each处理二维数组

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 

$.each(arr, function(i, item){ 
alert(i); 
alert(item); 

});

arr2为一个二维数组,item相当于取这二维数组中的每一个数组。

item[0]相对于取每一个一维数组里的第一个值

alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素

alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']

对此二位数组的处理稍作变更之后

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
$.each(arr, function(i, item){ 

$.each(item,function(j,val){


 alert(j);


alert(val);
 }); 
});

alert(j)将输出为0,1,2,0,1,2,0,1,2
alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc

each处理json数据,这个each就有更厉害了,能循环每一个属性

var obj = { one:1, two:2, three:3};   
 
each(obj, function(key, val) {   
   
alert(key);  
   
alert(val);   
 
});

这里alert(key)将输出one two three

alert(val)将输出one,1,two,2,three,3

这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。
而这个val等同于obj[key]

ecah处理dom元素,此处以一个input表单元素作为例子。

如果你dom中有一段这样的代码

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

然后你使用each如下

$.each($("input:hidden"), function(i,val){ 
   alert(val);
   alert(i);
   alert(val.name);
   alert(val.value);  
 });

那么,alert(val)将输出[object HTMLInputElement],因为它是一个表单元素。
alert(i)将输出为0,1,2,3

alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果
alert(val.value); 将输出111,222,333,444,如果使用this.value将输出同样的结果

如果将以上面一段代码改变成如下的形式

$("input:hidden").each(function(i,val){
  alert(i);
  alert(val.name);
  alert(val.value);    
});

可以看到,输出的结果是一样的,至于两种写法究竟区别在哪,我也还不知。此改变运用到上面几段数组的操作也会输出同样的结果。

这样,几个例子的实际结果已经得到答案。接着再继续往下研究,总不能知其然不知其所以然。

从以上的例子中可知jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法。

看下jQuery中的each实现(网络摘抄)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args
  var name, i = 0,length = object.length;
  if (args) {
    if (length == undefined) {
      for (name in object) {
        if (callback.apply(object[name], args) === false) {
          break;
        }
      }
    } else {
      for (; i < length;) {
        if (callback.apply(object[i++], args) === false) {
          break;
        }
      }
    }
  } else {
    if (length == undefined) {
      for (name in object) {
        if (callback.call(object[name], name, object[name]) === false) {
          break;
        }
      }
    } else {
      for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
      /*object[0]取得jQuery对象中的第一个DOM元素,通过for循环,
      得到遍历整个jQuery对象中对应的每个DOM元素,通过 callback.call( value,i,value);
      将callback的this对象指向value对象,并且传递两个参数,i表示索引值,value表示DOM元素;
      其中callback是类似于 function(index, elem) { ... } 的方法。
      所以就得到 $("...").each(function(index, elem){ ... });
      */
    }
  }
  return object;
}

jquery会自动根据传入的元素进行判断,然后在根据判断结果采取apply还是call方法的处理。在fn的实现中,可以直接采用this指针引用数组或是对象的子元素。

1.obj对象是数组

each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身

2.obj 对象不是数组

该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
jQuery实现简单飞机大战
Jul 05 #jQuery
You might like
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
用python与文件进行交互的方法
2018/03/01 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
用Python 执行cmd命令
2020/12/18 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
档案管理员岗位职责
2013/12/01 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers