jquery同级

使用 jQuery 选择同级元素的方法

在 jQuery 中，可以通过多种方法选择同级元素（即与目标元素共享同一父元素的元素）。以下是常用的方法：

siblings() 方法
siblings() 方法选择当前元素的所有同级元素，可以通过选择器进一步筛选。例如：

$("#target").siblings(); // 选择所有同级元素
$("#target").siblings(".class-name"); // 选择同级中具有特定类的元素

next() 和 prev() 方法
next() 选择紧邻的下一个同级元素，prev() 选择紧邻的上一个同级元素：

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

nextAll() 和 prevAll() 方法
nextAll() 选择当前元素之后的所有同级元素，prevAll() 选择之前的所有同级元素：

$("#target").nextAll(); // 之后的所有同级
$("#target").prevAll(); // 之前的所有同级

nextUntil() 和 prevUntil() 方法
nextUntil() 和 prevUntil() 选择当前元素到指定元素之间的同级元素（不包括边界元素）：

$("#target").nextUntil(".stop-class"); // 从当前元素到 .stop-class 之间的同级
$("#target").prevUntil(".stop-class"); // 同上，方向相反

示例代码

假设有以下 HTML 结构：

<ul>
  <li>Item 1</li>
  <li id="target">Item 2</li>
  <li class="highlight">Item 3</li>
  <li>Item 4</li>
</ul>

选择所有同级 li 元素：

$("#target").siblings("li").css("color", "red");

选择下一个同级元素：

$("#target").next().css("font-weight", "bold");

选择从 #target 到 .highlight 之间的同级元素：

$("#target").nextUntil(".highlight").css("background", "yellow");

注意事项

• 同级选择方法均不包含当前元素本身。
• 可以通过链式调用组合多个方法，例如 next().next() 选择下下个同级元素。
• 使用选择器参数可以进一步过滤结果。