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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
JS实现日期加减的方法
Nov 29 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
vue iView 上传组件之手动上传功能
Mar 16 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 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
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
jQuery知识点整理
2015/01/30 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
微信小程序自定义组件
2017/08/16 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
react基本安装与测试示例
2020/04/27 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python分布式环境下的限流器的示例
2017/10/26 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
给交警的表扬信
2014/01/12 职场文书
学习教师法的心得体会
2014/09/03 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS