$.each()迭代jQuery和非jQuery對象 .each()方法

迭代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() + "%" );
});