了解如何使用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之前的元素的背景颜色设置为黄色。