jQuery 過濾方法：first()、last()、eq() 與 filter()

選到一整組元素之後，用特定方法過濾出真正需要的那幾個，是 物件樹遍歷 的最後一塊拼圖。

索引從 0 起算

eq() 與 :even、:odd 依的都是從 0 開始的索引，不是視覺上的第幾個。這是最常寫錯的地方。

first()

在集合內，選取第一個元素。

範例

HTML

<ul id="List">
  <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>

JavaScript

$('#List li').first().css('background-color', 'pink');

last()

在集合內，選取最後一個元素。

範例

HTML

<ul id="List">
  <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>

JavaScript

$('#List li').last().css('background-color', 'pink');

eq()

在集合內，依索引位置選取指定的元素。索引從 0 起算，填負數則代表從尾端往回數。

eq(index);

參數

功能	說明	型別	範例	備註
index	索引位置	Number	0、-1	必填

範例

填 3 選到的是第四個項目。

HTML

<ul id="List">
  <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>

JavaScript

$('#List li').eq(3).css('background-color', 'pink');

filter()

過濾出指定的元素。它是在既有集合上再篩一次，當集合是一路遍歷過來、無法用單一 選取器 描述時特別好用。

filter(selector);

參數

功能	說明	型別	範例	備註
selector	選取器	String	':even'、':odd'	必填

範例

:odd 取的是索引為奇數的項目，也就是畫面上的第二、第四個，與肉眼判斷的奇偶剛好相反。

HTML

<ul id="List">
  <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>

JavaScript

$('#List li').filter(':odd').css('background-color', 'pink');

純樣式交給 CSS

若只是想做出斑馬紋這類視覺效果，用 CSS 的偽類別 就夠了，不必動用 JavaScript。

常見問題

索引是從 0 還是 1 開始？

從 0 開始。因此取第三個元素要填 2，這也是最容易寫錯的地方。

eq 可以填負數嗎？

可以。負數代表從集合的尾端往回數，填 -1 就是最後一個，效果等同 last()。

even 和 odd 為什麼和肉眼看到的相反？

因為它們依的是從 0 起算的索引，不是視覺上的第幾個。畫面上的第一個項目索引是 0，會被 :even 選中。

filter 和直接寫在選取器裡差在哪？

結果通常相同，但 filter() 是在既有集合上再篩一次。當集合是一路 遍歷 過來、無法用單一選取器描述時，就只能靠 filter()。

過濾之後還能繼續遍歷嗎？

可以。過濾方法一樣回傳新的集合，後面可以繼續接其他遍歷或 操作方法 。

延伸閱讀

同層子層物件樹遍歷CSS 偽類別選取器

參考資料：jQuery API：Traversing