jQuery 遍歷 - eq() 方法

jQuery 遍歷 - eq() 方法

實例

通過爲 index 爲 2 的 div 添加適當的類,將其變爲藍色:

$("body").find("div").eq(2).addClass("blue");

親自試一試

定義和用法

eq() 方法將匹配元素集縮減值指定 index 上的一個。

語法

.eq(index)
參數 描述
index

整數,指示元素的位置(最小爲 0)。

如果是負數,則從集合中的最後一個元素往回計數。

詳細說明

如果給定表示 DOM 元素集合的 jQuery 對象,.eq() 方法會用集合中的一個元素構造一個新的 jQuery 對象。所使用的 index 參數標示集合中元素的位置。

請看下面這個簡單的列表:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

例子 1

我們可以把該方法應用到這個列表項目集:

$('li').eq(2).css('background-color', 'red');

親自試一試

這個調用的結果是爲項目 3 設置了紅色背景。請注意,index 是基於零的,並且是在 jQuery 對象中引用元素的位置,而不是在 DOM 樹中。

例子 2

如果提供負數,則指示從集合結尾開始的位置,而不是從開頭開始。例如:

$('li').eq(-2).css('background-color', 'red');

親自試一試

這次,項目 4 的背景變爲紅色,這是因爲它是集合結尾開始的第二個。

例子 3

如果無法根據指定的 index 參數找到元素,則該方法構造帶有空集的 jQuery 對象,length 屬性爲 0。

$('li').eq(5).css('background-color', 'red');

親自試一試

這裏,沒有列表項會變爲紅色,這是因爲 .eq(5) 指示的第六個列表項。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章