遍历 jQuery 和非 jQuery 对象

jQuery 提供了一个对象迭代器实用程序，称为 $.each()，以及一个 jQuery 集合迭代器：.each()。它们不可互换。此外，还有两个有用的方法，称为 $.map() 和 .map()，它们可以简化我们常见的迭代用例之一。

链接 $.each()

$.each()是一个通用的迭代器函数，用于循环遍历对象、数组和类数组对象。普通对象通过其命名属性进行迭代，而数组和类数组对象通过其索引进行迭代。

$.each()本质上是传统 for 或 for-in 循环的替代品。给定

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

那么这个

for ( var i = 0, l = arr.length; i < l; i++ ) {
    sum += arr[ i ];
}
 
console.log( sum ); // 15

可以用这个替换

$.each( arr, function( index, value ){
    sum += value;
});
 
console.log( sum ); // 15

请注意，我们不必访问 arr[ index ]，因为该值已方便地传递给 $.each() 中的回调。

此外，给定

var sum = 0;
var obj = {
    foo: 1,
    bar: 2
}

那么这个

for (var item in obj) {
    sum += obj[ item ];
}
 
console.log( sum ); // 3

可以用这个替换

$.each( obj, function( key, value ) {
    sum += value;
});
 
console.log( sum ); // 3

同样，我们不必直接访问 obj[ key ]，因为该值直接传递给回调。

请注意，$.each() 适用于普通对象、数组、类数组对象（不是 jQuery 集合）。

这将被认为是不正确的

// Incorrect:
$.each( $( "p" ), function() {
    // Do something
});

对于 jQuery 集合，请使用 .each()。

链接 .each()

.each() 直接用于 jQuery 集合。它遍历集合中每个匹配的元素，并对该对象执行回调。当前元素在集合中的索引作为参数传递给回调。值（在这种情况下是 DOM 元素）也传递，但回调在当前匹配元素的上下文中触发，因此 this 关键字指向当前元素，就像在其他 jQuery 回调中预期的那样。

例如，给定以下标记

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

.each() 可以像这样使用

$( "li" ).each( function( index, element ){
    console.log( $( this ).text() );
});
 
// Logs the following:
// Link 1
// Link 2
// Link 3

链接 第二个参数

经常会提出这样的问题，“如果 this 是元素，为什么向回调传递了第二个 DOM 元素参数？”

无论是有意还是无意，执行上下文都可能会发生变化。在一致地使用关键字 this 时，很容易最终让自己或其他阅读代码的开发人员感到困惑。即使执行上下文保持不变，使用第二个参数作为命名参数可能会更具可读性。例如

$( "li" ).each( function( index, listItem ) {
 
    this === listItem; // true
 
    // For example only. You probably shouldn't call $.ajax() in a loop.
    $.ajax({
        success: function( data ) {
            // The context has changed.
            // The "this" keyword no longer refers to listItem.
            this !== listItem; // true
        }
    });
 
});

链接 有时 .each() 是不必要的

许多 jQuery 方法隐式地遍历整个集合，将它们的行为应用于每个匹配的元素。例如，这是不必要的

$( "li" ).each( function( index, el ) {
    $( el ).addClass( "newClass" );
});

而这是正确的

$( "li" ).addClass( "newClass" );

文档中的每个 <li> 都将添加类“newClass”。

另一方面，有些方法不会遍历集合。当我们需要在设置新值之前从元素获取信息时，需要 .each()。

这将不起作用

// Doesn't work:
$( "input" ).val( $( this ).val() + "%" );
 
// .val() does not change the execution context, so this === window

相反，应该这样编写

$( "input" ).each( function( i, el ) {
    var elem = $( el );
    elem.val( elem.val() + "%" );
});

以下是需要 .each() 的方法列表

• .attr()（获取器）
• .css()（获取器）
• .data()（获取器）
• .height()（获取器）
• .html()（获取器）
• .innerHeight()
• .innerWidth()
• .offset()（获取器）
• .outerHeight()
• .outerWidth()
• .position()
• .prop()（获取器）
• .scrollLeft()（获取器）
• .scrollTop()（获取器）
• .val()（获取器）
• .width()（获取器）

请注意，在大多数情况下，“获取器”签名会返回 jQuery 集合中第一个元素的结果，而设置器则会作用于匹配元素的整个集合。.text() 除外，获取器签名将返回所有匹配元素的文本的连接字符串。

除了 setter 值之外，属性、CSS setter 和 DOM 插入“setter”方法（即 .text() 和 .html()）接受应用于匹配集中每个元素的匿名回调函数。传递给回调函数的参数是匹配集中匹配元素的索引和方法的“getter”签名的结果。

例如，这些是等效的

$( "input" ).each( function( i, el ) {
    var elem = $( el );
    elem.val( elem.val() + "%" );
});
 
$( "input" ).val(function( index, value ) {
    return value + "%";
});

使用此隐式迭代时需要记住的另一件事是，诸如 .children() 或 .parent() 的遍历方法将对集合中的每个匹配元素执行操作，返回所有子节点或父节点的组合集合。

link .map()

有一个常见的迭代用例，可以使用 .map() 方法更好地处理。每当我们希望根据 jQuery 选择器中的所有匹配元素创建数组或连接字符串时，我们最好使用 .map()。

例如，不要这样做

var newArr = [];
 
$( "li" ).each( function() {
    newArr.push( this.id );
});

我们可以这样做

$( "li" ).map( function(index, element) {
    return this.id;
}).get();

注意最后连接的 .get()。.map() 实际上会返回一个 jQuery 包裹的集合，即使我们从回调中返回字符串。我们需要使用 .get() 的无参数版本才能返回一个基本 JavaScript 数组，以便我们使用。要连接成一个字符串，我们可以将纯 JS .join() 数组方法连接到 .get() 之后。

link $.map

与 $.each() 和 .each() 类似，也有 $.map() 和 .map()。不同之处也与 .each() 方法非常相似。$.map() 适用于纯 JavaScript 数组，而 .map() 适用于 jQuery 元素集合。由于它适用于纯数组，因此 $.map() 返回一个纯数组，并且不需要调用 .get() - 实际上，它会引发错误，因为它不是本机 JavaScript 方法。

警告：$.map() 会切换回调参数的顺序。这样做是为了匹配 ECMAScript 5 中提供的本机 JavaScript .map() 方法。

例如

<li id="a"></li>
<li id="b"></li>
<li id="c"></li>
 
<script>
 
var arr = [{
    id: "a",
    tagName: "li"
}, {
    id: "b",
    tagName: "li"
}, {
    id: "c",
    tagName: "li"
}];
 
// Returns [ "a", "b", "c" ]
$( "li" ).map( function( index, element ) {
    return element.id;
}).get();
 
// Also returns [ "a", "b", "c" ]
// Note that the value comes first with $.map
$.map( arr, function( value, index ) {
    return value.id;
});
 
</script>