jQuery | prev() & prevAll() 示例

在 jQuery 中，我们可以使用 prev() 和 prevAll() 方法来查找当前元素的前面一个或多个兄弟元素。

prev()

prev() 方法返回当前元素的前一个兄弟元素。如果没有前一个兄弟元素，则返回空 jQuery 对象。

语法

$(selector).prev()

示例

<ul>
  <li>第一个列表项</li>
  <li class="current">第二个列表项</li>
  <li>第三个列表项</li>
  <li>第四个列表项</li>
  <li>第五个列表项</li>
</ul>

<script>
$(function(){
  // 获取当前元素的前一个兄弟元素
  var prev = $("li.current").prev();
  // 添加样式
  prev.css("color", "red");
});
</script>

在上面的示例中，我们获取了当前元素 .current 的前一个兄弟元素，即第一个列表项，并把它的颜色设置为红色。

prevAll()

prevAll() 方法返回当前元素的所有前面的兄弟元素。如果没有前面的兄弟元素，则返回空 jQuery 对象。

语法

$(selector).prevAll()

示例

<ul>
  <li>第一个列表项</li>
  <li class="current">第二个列表项</li>
  <li>第三个列表项</li>
  <li>第四个列表项</li>
  <li>第五个列表项</li>
</ul>

<script>
$(function(){
  // 获取当前元素的前面所有兄弟元素
  var prevAll = $("li.current").prevAll();
  // 添加样式
  prevAll.css("color", "red");
});
</script>

在上面的示例中，我们获取了当前元素 .current 前面的所有兄弟元素，并把它们的颜色设置为红色。

需要注意的是，prev() 和 prevAll() 方法只能查找当前元素前面的兄弟元素，如果需要查找当前元素后面的兄弟元素，可以使用 next() 和 nextAll() 方法。