jQuery 提供了一个对象迭代器实用程序，称为 $.each()，以及一个 jQuery 集合迭代器：.each()。它们不可互换。此外，还有两个有用的方法，称为 $.map() 和 .map()，它们可以简化我们常见的迭代用例之一。
链接 $.each()$.each()是一个通用的迭代器函数，用于循环遍历对象、数组和类数组对象。普通对象通过其命名属性进行迭代，而数组和类数组对象通过其索引进行迭代。
$.each()本质上是传统 for 或 for-in 循环的替代品。给定
1
2
3
var sum = 0; var arr = [ 1, 2, 3, 4, 5 ];
那么这个
1
2
3
4
5
for ( var i = 0, l = arr.length; i < l; i++ ) { sum += arr[ i ];} console.log( sum ); // 15
可以用这个替换
1
2
3
4
5
$.each( arr, function( index, value ){ sum += value;}); console.log( sum ); // 15
请注意，我们不必访问 arr[ index ]，因为该值已方便地传递给 $.each() 中的回调。
此外，给定
1
2
3
4
5
var sum = 0;var obj = { foo: 1, bar: 2}
那么这个
1
2
3
4
5
for (var item in obj) { sum += obj[ item ];} console.log( sum ); // 3
可以用这个替换
1
2
3
4
5
$.each( obj, function( key, value ) { sum += value;}); console.log( sum ); // 3
同样，我们不必直接访问 obj[ key ]，因为该值直接传递给回调。
请注意，$.each() 适用于普通对象、数组、类数组对象（不是 jQuery 集合）。
这将被认为是不正确的
1
2
3
4
// Incorrect:$.each( $( "p" ), function() { // Do something});
对于 jQuery 集合，请使用 .each()。
链接 .each().each() 直接用于 jQuery 集合。它遍历集合中每个匹配的元素，并对该对象执行回调。当前元素在集合中的索引作为参数传递给回调。值（在这种情况下是 DOM 元素）也传递，但回调在当前匹配元素的上下文中触发，因此 this 关键字指向当前元素，就像在其他 jQuery 回调中预期的那样。
例如，给定以下标记
1
2
3
4
5
.each() 可以像这样使用
1
2
3
4
5
6
7
8
$( "li" ).each( function( index, element ){ console.log( $( this ).text() );}); // Logs the following:// Link 1// Link 2// Link 3
链接 第二个参数经常会提出这样的问题，“如果 this 是元素，为什么向回调传递了第二个 DOM 元素参数？”
无论是有意还是无意，执行上下文都可能会发生变化。在一致地使用关键字 this 时，很容易最终让自己或其他阅读代码的开发人员感到困惑。即使执行上下文保持不变，使用第二个参数作为命名参数可能会更具可读性。例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( "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 方法隐式地遍历整个集合，将它们的行为应用于每个匹配的元素。例如，这是不必要的
1
2
3
$( "li" ).each( function( index, el ) { $( el ).addClass( "newClass" );});
而这是正确的
1
$( "li" ).addClass( "newClass" );
文档中的每个
另一方面，有些方法不会遍历集合。当我们需要在设置新值之前从元素获取信息时，需要 .each()。
这将不起作用
1
2
3
4
// Doesn't work:$( "input" ).val( $( this ).val() + "%" ); // .val() does not change the execution context, so this === window
相反，应该这样编写
1
2
3
4
$( "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”签名的结果。
例如，这些是等效的
1
2
3
4
5
6
7
8
$( "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()。
例如，不要这样做
1
2
3
4
5
var newArr = []; $( "li" ).each( function() { newArr.push( this.id );});
我们可以这样做
1
2
3
$( "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() 方法。
例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29