前端之家收集整理的这篇文章主要介绍了
jquery中$each()方法的使用指南,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
$.each()与$(selector).each()不同,后者专用于jquery对象的遍历,前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数.
each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM,JSON 等等
在javaScript开发过程中使用$each可以大大的减轻我们的工作量。
下面提一下
each的几种常用的用法
each处理一维数组
alert(i)将输出0,1,2
alert(val)将输出aaa,bbb,ccc
each处理二维数组
arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值
alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
alert(item)将输出为 ['a','aaa'],['b','bbb'],['c','ccc']
对此二位数组的处理稍作变更之后
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就有更厉害了,能循环每一个属性
这里alert(key)将输出one two three
alert(val)将输出one,1,two,2,three,3
这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。
而这个val等同于obj[key]
ecah处理dom元素,此处以一个input表单元素作为例子。
如果你dom中有一段这样的代码
方法有三个参数:进行操作的对象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,value);
将callback的this对象指向value对象,并且传递两个参数,i表示索引值,value表示DOM元素;
其中callback是类似于 function(index,elem) { ... } 的
方法。
所以就得到 $("...").each(function(index,elem){ ... });
*/
}
}
return object;
}