jQuery 学习笔记 迭代jQuery对象和非jQuery对象

jQuery提供了一个通用对象迭代器$.each()和一个jQuery集合迭代器.each(),它们是不相同的。

事实上，jQuery还提供了一组更有用的$.map() 和 .map()方法

$.each() 

$.each() 是一个通用的迭代函数，可以循环遍历object,arrays, 和 array-like objects ，基本上是对

for 和for in的一个简单替换

使用for循环 

        var sum = 0;
        var num = [1,2,3,4,5];

        for(var i = 0;i < num.length;i++)
        {
            sum += num[i];
        }
        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 2

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