当前位置：首页 > jquery

jquery 同胞

2026-03-16 22:09:31jquery

jQuery 同胞元素选择方法

在 jQuery 中，同胞元素（siblings）指的是共享同一个父元素的元素。以下是几种常用的选择同胞元素的方法：

siblings() 方法 siblings() 方法返回被选元素的所有同胞元素，可以传入选择器进行过滤。例如：

$("li.active").siblings(); // 选择所有与 li.active 同级的元素
$("li.active").siblings(".highlight"); // 选择所有带有 highlight 类的同级元素

next() 和 nextAll() 方法 next() 选择下一个紧邻的同胞元素，nextAll() 选择之后的所有同胞元素：

jquery 同胞

$("li.active").next(); // 选择 active 后的第一个同级元素
$("li.active").nextAll(); // 选择 active 后的所有同级元素

prev() 和 prevAll() 方法 prev() 选择前一个紧邻的同胞元素，prevAll() 选择之前的所有同胞元素：

$("li.active").prev(); // 选择 active 前的第一个同级元素
$("li.active").prevAll(); // 选择 active 前的所有同级元素

nextUntil() 和 prevUntil() 方法 nextUntil() 和 prevUntil() 选择介于两个元素之间的同胞元素：

jquery 同胞

$("li.start").nextUntil("li.end"); // 选择从 start 到 end 之间的所有同级元素
$("li.end").prevUntil("li.start"); // 选择从 end 到 start 之间的所有同级元素

实际应用示例

假设有以下 HTML 结构：

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

使用 jQuery 选择同胞元素：

$("li.active").siblings().css("color", "red"); // 将 Item 1、3、4 的文字颜色设为红色
$("li.active").next().css("font-weight", "bold"); // 将 Item 3 的文字加粗
$("li.active").prev().css("text-decoration", "underline"); // 将 Item 1 的文字加下划线

这些方法可以灵活组合，满足不同场景下的 DOM 操作需求。