JQuery官方学习资料（译）：遍历JQuery对象和非JQuery对象

    JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each()。

 

• $.each()

    $.each()是一个通用的方法用来遍历对象和数组，Plain对象是通过其命名属性进行遍历的。

    $.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

    需要注意的是$.each()可以用来迭代plain对象,、数组和非JQuery集合的类数组对象，JQuery集合需要使用.each()。

// 以下代码是错误的

$.each( $( "p" ), function() {});

 

• .each()

    .each()是直接使用在JQuery集合上的，它遍历集合中匹配的元素并执行回调函数，当前元素的序号作为回调函数的第一个参数，如果是DOM元素的话也将被传递作为第二个参数。在回调函数中也可以使用this关键字指向当前元素。

<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关键字时，很容易混淆自己或别人编写的代码。即使执行上下文保持不变，它也更具有可读性。

$( "li" ).each( function( index, listItem ) {

this === listItem; // true

$.ajax({

success: function( data ) {

// 上下文发生改变了

this !== listItem; // true

}

});

});

• • 有时候.each()不是必要的

    许多JQuery方法都隐含遍历，他们将应用在每个匹配的元素上。例如：

$( "li" ).each( function( index, el ) {

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

});

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

    也有一些方法是不能进行遍历的，这时就需要 .each()的帮助了。例如：

// 无法运行的

$( "input" ).val( $( this ).val() + "%" );

// .val() 不能改变执行上下文，所以这里this === window

$( "input" ).each( function( i, el ) {

var elem = $( el );

elem.val( elem.val() + "%" );

});

    以下的方法是需要 .each()进行迭代的：

• .attr() (getter)
• .css() (getter)
• .data() (getter)
• .height() (getter)
• .html() (getter)
• .innerHeight()
• .innerWidth()
• .offset() (getter)
• .outerHeight()
• .outerWidth()
• .position()
• .prop() (getter)
• .scrollLeft() (getter)
• .scrollTop() (getter)
• .val() (getter)
• .width() (getter)

    需要注意的是大部分情况下，getter返回的结果是JQuery集合中的第一个元素，而setter的行为影响集合中所有匹配的元素。

    此外，一个setter的值、特性、属性、CSS的setter和一个接受匿名回调函数的DOM插入方法（.text() and .html()）是被应用到每一个匹配的元素，传递给回调函数的参数是当前匹配元素的序号。

$( "input" ).each( function( i, el ) {

var elem = $( el );

elem.val( elem.val() + "%" );

});

$( "input" ).val(function( index, value ) {

return value + "%";

});

 

• .map()

    无论什么时候，当我们想创建一个数组或基于所匹配的元素串联字符串，我们可以使用.map()更好的进行遍历。

var newArr = [];

$( "li" ).each( function() {

newArr.push( this.id );

});

$( "li" ).map( function(index, element) {

return this.id;

}).get();

    需要注意的是，.get()连接在最后面，.map()返回的是一个JQuery包裹集合，即使回调函数返回的是字符串。.get()返回的是一个基本的JavaScript数组。如果想要拼接字符串，可以在数组方法.get()之后连接原生JavaScript方法 .join()。

 

• $.map()

    $.map()运行在原生JavaScript数组上，而.map()运行在JQuery元素集合上。$.map()返回的是一个原生JavaScript数组并且不需要使用.get()方法。

<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"

}];

// 返回 [ "a", "b", "c" ]

$( "li" ).map( function( index, element ) {

return element.id;

}).get();

// 返回 ["a", "b", "c"]

$.map( arr, function( value, index ) {

return value.id;

});

</script>