了解如何使用jQuery Prev()來遍歷和修改HTML元素

一、什麼是jQuery Prev()方法

jQuery中提供了很多方便開發者操作DOM元素的方法，其中之一就是Prev()。Prev()方法返回當前元素之前的一個同輩元素。它可以用來遍歷和修改HTML元素。

<div>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
</div>
<script>
  $("p").prev().css("background-color", "yellow");
</script>

上面的例子會把所有的paragraph之前的元素的背景顏色設置為黃色。

二、使用Prev()方法遍歷和修改元素的屬性與內容

Prev()除了可以修改元素的樣式，還可以修改元素的屬性和內容。比如可以通過Prev修改列表項的標記圖標顏色、字體大小等。

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
</ul>
<script>
  $("li").prev().css("color", "red");
  $("li").prev().html("<h3>標記</h3>");
  $("li").prev().attr("title", "標記");
</script>

上面的例子將會把每個列表項前的標記圖標設置為紅色、改變標記內容為「標記」並且設置title屬性的值為「標記」。

三、使用Prev()方法結合其他選擇器來操作元素

Prev()方法可以通過其他選擇器來選擇指定的元素。比如結合「eq()」方法以及”:last”選擇器來選擇倒數第二個同級元素。

<div>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
  <p>段落4</p>
</div>
<script>
  $("p:last").prev().prev().css("background-color", "yellow");
</script>

上面的例子會把第二個paragraph元素之前的元素的背景顏色設置為黃色。

四、使用PrevAll()方法來查找所有的兄弟元素

PrevAll()方法會查找指定元素之前的所有同級元素。實例代碼如下:

<div>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
</div>
<script>
  $("p:last").prevAll().css("background-color", "yellow");
</script>

上面的例子會把每個paragraph之前的元素的背景顏色設置為黃色。