jQuery提供了一个通用对象迭代器$.each()和一个jQuery集合迭代器.each(),它们是不相同的。
事实上,jQuery还提供了一组更有用的$.map() 和 .map()方法
$.each()
$.each() 是一个通用的迭代函数,可以循环遍历object,arrays, 和 array-like objects ,基本上是对
for 和for in的一个简单替换
使用for循环
1 var sum = 0;
2 var num = [1,2,3,4,5];
3
4 for(var i = 0;i < num.length;i++)
5 {
6 sum += num[i];
7 }
8 console.log(sum); //15
使用$.each()使代码更简洁
$.each(num,function(index,value){
sum += value;
})
使用for in 循环
var sum = 0;
var obj = {
foo: 1,
bar: 2
};
for(var item in obj)
{
sum += obj[item];
}
console.log(sum); //3
而使用$.each()
$.each(obj,function(key,value){
sum += value;
})
.each() 用来迭代jQuery集合
使用下面这个集合
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
$("li").each(function(index,element){
console.log($(this).text());
});
输出
Link 1
Link 3
这里就有一个疑问,为什么不使用第二个参数呢?要注意,在上面这个上下文环境this === element
如果上下文环境改变 this 就不一定等于 element了,使用的时候要注意。
因为有一些方法本身就会遍历所有元素来找到匹配的元素,而有些方法只会找到第一个匹配的元素,使用的时候也应该注意,
在这里就不一一列举了
.map() 最好在产生一个数组或者是产生一个拼接字符串的时候使用
var newArr = [];
$( "li" ).each( function() {
newArr.push( this.id );
});
用来代替以上的.map()代码为
$( "li" ).map( function(index, element) {
return this.id;
}).get();
$.map() 与.map()的区别就和$.each()和.each()的区别一样,这里就不仔细介绍了
看了下面这个例子就全明白了
使用.map()
<li id="a"></li>
<li id="b"></li>
<li id="c"></li>
// Returns [ "a", "b", "c" ]
$( "li" ).map( function( index, element ) {
return element.id;
}).get();
使用$.map()
var arr = [{
id: "a",
tagName: "li"
}, {
id: "b",
tagName: "li"
}, {
id: "c",
tagName: "li"
}];
$.map( arr, function( value, index ) {
return value.id;
});
两种方法都会返回["a","b"."c"],这里需要注意的是第一种方法使用的是第二个元素的id,第二种方法使用的是第一个元素的id