jQuery中的each()详细介绍(推荐)


Posted in Javascript onMay 25, 2016

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

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

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

each处理一维数组

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
alert(i); 
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类似。

Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
Javascript 实用小技巧
Apr 07 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
JS前端加密算法示例
Dec 22 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
使用jQuery实现购物车
Oct 29 jQuery
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 #Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 #Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 #Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 #Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 #Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 #Javascript
js提交form表单,并传递参数的实现方法
May 25 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
thinkphp的c方法使用示例
2014/02/24 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
Python中的index()方法使用教程
2015/05/18 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Django 反向生成url实例详解
2019/07/30 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
如何获取某个日期是当月的最后一天
2013/12/05 面试题
一套C#面试题
2013/10/09 面试题
中专生毕业自我鉴定
2013/11/01 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL