jquery中的迭代是什麼意思

jquery的迭代代表遍歷，分為顯示迭代和隱式迭代，其差異：顯式迭代，「.each()」方法就是典型的顯式迭代，jQuery方法只能一個一個地、依序操作目前元素，隱式迭代，jQuery方法可以一下子就把物件裡（符合條件的）所有的元素都進行某個操作，不關心目前輪到那個元素，一次性完成。

本教學作業系統：Windows10系統、jQuery3.6.0版本、Dell G3電腦。

jquery的迭代代表遍歷，分為顯示迭代和隱式迭代：

顯式迭代就是說，某個jQuery方法只能一個一個地、依次地操作目前輪到的那個元素。

隱式迭代的意思是，某個jQuery方法可以一下子就把物件裡（符合條件的）所有的元素都進行某個操作，神不知不覺的就把物件裡所有的元素都辦了。你也不知道目前操作到哪個元素了，因為一次性就都操作好了。
式迭代的例子：

<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( “li” ).addClass( “bar” );

這就是隱式迭代，不需要你關心目前輪到哪個元素了，因為一下子就把所有的li元素都加上bar這個class了。
還是這個功能，我如果想用顯式迭代的方式來寫，該怎麼寫呢？

$( “li” ).each(function() {
$( this ).addClass( “foo” );
});

對 li 一個一個地添加類，這樣寫功能上雖然也能實現，但是顯然這樣寫比較囉嗦，並不推薦這種寫法。
下面我再舉一個只能用明確迭代來寫的例子：（HTML 部分的程式碼和上面一樣）

$( “li” ).each(function( index ) {
console.log( index + “: ” + $( this ).text() );
});

.each()方法就是典型的明確迭代：首先我用選擇器選取了所有的li元素，形成了一個對象，這樣對像是長這樣的（類似json格式）：[ { 0：li } , { 1：li } ]每個對象還有自己的一大堆屬性…

回到.each() 方法。當遍歷到第一個li元素的時候，就列印第一個訊息；遍歷到第二個 li 的時候，再列印第二個訊息。

再回顧剛才那一段程式碼：

$( “li” ).each(function( index ) {
console.log( index + “: ” + $( this ).text() );
});

index是一個形參，表示目前輪到的那個元素的下標。既然是形參，不用 index，用 i 也行。
那麼問題來了：為什麼這個function裡面寫一個參數，這個參數就代表下標了呢？答案是：.each() 方法的function，它有2個參數。

.each方法的寫法是這樣的：

$(selector).each(function( index , element ){
//do something
})

function的第一個參數是整數的下標，第二個參數用於：傳回目前讀取到的那個元素，像是剛才的程式碼，element就是回傳每個li。所以還是剛才的程式碼，我們也可以這樣寫：

$( “li” ).each(function( i,element ) {
console.log($(element));
console.log( i + “: ” + $(element).text() );
});

有時候我們不寫element，只是因為使用this關鍵字可以取代element。 this等於element，同樣，$(this)和$(element)是一樣的。使用$()選擇器選取this或element元素之後，我們就可以使用jQuery提供的api，很方便的操作他們，例如，使用text（）方法讀取元素的文字內容，或是使用css（方法修改樣式，等等。

#

以上是jquery中的迭代是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！