jQuery DOM Traversal - 同層

選取同層元素的方法。

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');