首頁 > 常見問題 > jquery中的迭代是什麼意思

jquery中的迭代是什麼意思

尊渡假赌尊渡假赌尊渡假赌
發布: 2023-05-25 11:25:58
原創
959 人瀏覽過

jquery的迭代代表遍歷,分為顯示迭代和隱式迭代,其差異:顯式迭代,「.each()」方法就是典型的顯式迭代,jQuery方法只能一個一個地、依序操作目前元素,隱式迭代,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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板