当前位置：首页 > jquery

jquery同级元素选择器

2026-02-04 08:52:57jquery

jQuery 同级元素选择器

jQuery 提供了多种方法来选择同级元素，这些方法可以基于 DOM 结构快速定位目标元素。以下是常用的同级元素选择器及其用法：

siblings() 方法

siblings() 方法选择当前元素的所有同级元素（不包括自己）。可以通过参数进一步筛选目标元素。

// 选择所有同级元素
$("#target").siblings();

// 选择同级的 <p> 元素
$("#target").siblings("p");

next() 方法

next() 方法选择当前元素的下一个同级元素（紧邻的后一个元素）。

// 选择下一个同级元素
$("#target").next();

// 选择下一个同级的 <div> 元素
$("#target").next("div");

nextAll() 方法

nextAll() 方法选择当前元素之后的所有同级元素。

// 选择之后的所有同级元素
$("#target").nextAll();

// 选择之后的所有同级 <span> 元素
$("#target").nextAll("span");

prev() 方法

prev() 方法选择当前元素的上一个同级元素（紧邻的前一个元素）。

// 选择上一个同级元素
$("#target").prev();

// 选择上一个同级的 <li> 元素
$("#target").prev("li");

prevAll() 方法

prevAll() 方法选择当前元素之前的所有同级元素。

// 选择之前的所有同级元素
$("#target").prevAll();

// 选择之前的所有同级 <a> 元素
$("#target").prevAll("a");

nextUntil() 和 prevUntil() 方法

nextUntil() 和 prevUntil() 方法分别选择当前元素之后或之前的同级元素，直到遇到指定的选择器匹配的元素为止。

// 选择之后的所有同级元素，直到遇到 .stop 元素
$("#target").nextUntil(".stop");

// 选择之前的所有同级 <div> 元素，直到遇到 #end 元素
$("#target").prevUntil("#end", "div");

示例

以下是一个完整的示例，展示如何使用这些方法：

<ul>
  <li>Item 1</li>
  <li id="target">Item 2 (Target)</li>
  <li>Item 3</li>
  <li class="stop">Item 4 (Stop)</li>
  <li>Item 5</li>
</ul>

<script>
  // 选择所有同级 <li> 元素
  $("#target").siblings("li").css("color", "red");

  // 选择下一个同级元素
  $("#target").next().css("font-weight", "bold");

  // 选择之前的所有同级元素
  $("#target").prevAll().css("background", "yellow");

  // 选择之后的所有同级元素，直到遇到 .stop
  $("#target").nextUntil(".stop").css("text-decoration", "underline");
</script>

通过这些方法，可以灵活地选择和操作 DOM 中的同级元素。

jquery同级元素选择器