当前位置：首页 > jquery

jquery同级元素

2026-02-03 14:12:48jquery

jQuery 同级元素操作方法

在jQuery中，可以通过多种方法选择和操作同级元素（即拥有相同父元素的元素）。以下是常用的方法：

siblings() 方法

siblings() 方法用于选取当前元素的所有同级元素（不包括自己）。可以添加选择器进行筛选：

$("#target").siblings(); // 获取所有同级元素
$("#target").siblings(".active"); // 获取所有带有active类的同级元素

next() 和 nextAll()

next() 获取紧邻的下一个同级元素：

$("#target").next(); // 获取下一个同级元素
$("#target").next(".highlight"); // 获取下一个带有highlight类的同级元素

nextAll() 获取之后的所有同级元素：

$("#target").nextAll(); // 获取之后所有同级元素
$("#target").nextAll("div"); // 获取之后所有div同级元素

prev() 和 prevAll()

prev() 获取紧邻的前一个同级元素：

$("#target").prev(); // 获取前一个同级元素
$("#target").prev("p"); // 获取前一个p标签同级元素

prevAll() 获取之前的所有同级元素：

$("#target").prevAll(); // 获取之前所有同级元素
$("#target").prevAll("li"); // 获取之前所有li标签同级元素

nextUntil() 和 prevUntil()

nextUntil() 获取之后直到匹配选择器的同级元素（不包括匹配的元素）：

$("#target").nextUntil(".stop"); // 获取之后直到遇到.stop类的所有同级元素

prevUntil() 获取之前直到匹配选择器的同级元素：

$("#target").prevUntil("#end"); // 获取之前直到遇到#end元素的所有同级元素

示例代码

<ul>
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li class="stop">Item 5</li>
</ul>

<script>
$(document).ready(function(){
  // 获取.active的所有同级元素
  $(".active").siblings().css("color", "red");

  // 获取.active之后的所有同级元素直到.stop
  $(".active").nextUntil(".stop").css("font-weight", "bold");
});
</script>