http://www.cnblogs.com/seapub/articles/2457264.html
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) {
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]) {}
}
}
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类似。