jquery中$each()方法的使用指南


Posted in Javascript onApril 30, 2015

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数.

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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
js+html实现周岁年龄计算器
Jun 25 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 #Javascript
javascript实现checkbox全选的代码
Apr 30 #Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 #Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 #Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 #Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 #Javascript
jQuery实现冻结表格行和列
Apr 29 #Javascript
You might like
mysql limit查询优化分析
2008/11/12 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
jQuery操作css样式
2017/05/15 jQuery
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
python中requests使用代理proxies方法介绍
2017/10/25 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Windows下python3.7安装教程
2018/07/31 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
python将音频进行变速的操作方法
2020/04/08 Python
python 怎样进行内存管理
2020/11/10 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
工作表扬信的范文
2014/01/10 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
丧事主持词
2015/07/02 职场文书
详解JS ES6编码规范
2021/05/07 Javascript