jQuery 遍歷 eq() 方法

jQuery 參考手冊(cè) 遍歷

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

1. 語法

.eq(index)

如果給定表示 DOM 元素集合的 jQuery 對(duì)象，.eq() 方法會(huì)用集合中的一個(gè)元素構(gòu)造一個(gè)新的 jQuery 對(duì)象。所使用的 index 參數(shù)標(biāo)示集合中元素的位置。

請(qǐng)看下面這個(gè)簡(jiǎn)單的列表：

<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

我們可以把該方法應(yīng)用到這個(gè)列表項(xiàng)目集：

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

這個(gè)調(diào)用的結(jié)果是為項(xiàng)目 3 設(shè)置了紅色背景。請(qǐng)注意，index 是基于零的，并且是在 jQuery 對(duì)象中引用元素的位置，而不是在 DOM 樹中。

例子 2

如果提供負(fù)數(shù)，則指示從集合結(jié)尾開始的位置，而不是從開頭開始。例如：

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

這次，項(xiàng)目 4 的背景變?yōu)榧t色，這是因?yàn)樗羌辖Y(jié)尾開始的第二個(gè)。

例子 3

如果無法根據(jù)指定的 index 參數(shù)找到元素，則該方法構(gòu)造帶有空集的 jQuery 對(duì)象，length 屬性為 0。

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

這里，沒有列表項(xiàng)會(huì)變?yōu)榧t色，這是因?yàn)?.eq(5) 指示的第六個(gè)列表項(xiàng)。

2. 范例

通過為 index 為 2 的 div 添加適當(dāng)?shù)念?，將其變?yōu)樗{(lán)色：

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

jQuery 參考手冊(cè) 遍歷