jQuery 同層遍歷：next()、prev()、nextAll() 與 siblings()

選取同層元素的方法。同層 指的是擁有同一個父元素的兄弟元素，例如：清單 裡的每個項目彼此就是同層。以下方法都屬於 物件樹遍歷 ，也都可以再傳入選取器進行篩選。

next()

取得當前元素的後一個，可用選取器進行篩選。

範例

HTML

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li id="Item">List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

JavaScript

$('#Item').next().css('background-color', 'pink');

prev()

取得當前元素的前一個，可用選取器進行篩選。

範例

HTML

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li id="Item">List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

JavaScript

$('#Item').prev().css('background-color', 'pink');

nextAll()

取得當前元素後面的全部，可用選取器進行篩選。

範例

HTML

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li id="Item">List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

JavaScript

$('#Item').nextAll().css('background-color', 'pink');

prevAll()

取得當前元素前面的全部，可用選取器進行篩選。

範例

HTML

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li id="Item">List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

JavaScript

$('#Item').prevAll().css('background-color', 'pink');

siblings()

取得除了當前元素以外的其他同層元素，可用選取器進行篩選。標籤切換、分頁選中狀態這類需求最常用到它：把樣式加到被點擊的那一個，同時清掉其他所有的。

範例

HTML

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li id="Item">List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

JavaScript

$('#Item').siblings().css('background-color', 'pink');

搭配類別更好維護

上面的範例為了看得清楚而直接改 行內樣式 ，實務上建議改用 addClass() 與 removeClass() 切換類別。

常見問題

同層指的是什麼？

指擁有同一個父元素的兄弟元素。清單裡的每個項目彼此就是同層，而它們的 父元素 則是外層的清單容器。

siblings 會包含自己嗎？

不會。它取的是除了當前元素之外的所有同層元素，這也是它和用選取器直接選一整層最大的差別。

next 和 nextAll 差在哪？

next() 只取緊接在後面的那一個，nextAll() 則取後面的全部。往前查找的兩個方法也是同樣的關係。

可以只找符合條件的同層元素嗎？

可以。這些方法都接受一個選取器參數，傳入之後只有符合條件的結果會被留下，也可以再接 過濾方法 。

為什麼常見的分頁或標籤切換會用 siblings？

因為切換時通常要把樣式加到被點擊的那一個、同時清掉其他所有的。用 siblings() 一次取得其他項目，一行就能完成。

延伸閱讀

父層子層過濾方法物件樹遍歷

參考資料：jQuery API：Traversing