jquery获取兄弟元素

jQuery 获取兄弟元素的方法

在 jQuery 中，可以通过多种方法获取当前元素的兄弟元素。以下是常用的几种方式：

siblings() 方法

siblings() 方法返回被选元素的所有兄弟元素（同层级的所有元素）。可以通过选择器进一步筛选。

// 获取所有兄弟元素
$("selector").siblings();

// 获取特定类型的兄弟元素（例如 class 为 'active' 的元素）
$("selector").siblings(".active");

next() 和 nextAll() 方法

next() 方法返回被选元素的下一个兄弟元素（紧邻的下一个元素）。
nextAll() 方法返回被选元素之后的所有兄弟元素。

// 获取下一个兄弟元素
$("selector").next();

// 获取之后所有兄弟元素
$("selector").nextAll();

// 获取之后特定类型的兄弟元素
$("selector").nextAll(".target");

prev() 和 prevAll() 方法

prev() 方法返回被选元素的上一个兄弟元素（紧邻的前一个元素）。
prevAll() 方法返回被选元素之前的所有兄弟元素。

// 获取上一个兄弟元素
$("selector").prev();

// 获取之前所有兄弟元素
$("selector").prevAll();

// 获取之前特定类型的兄弟元素
$("selector").prevAll(".target");

nextUntil() 和 prevUntil() 方法

nextUntil() 返回被选元素之后直到匹配选择器的所有兄弟元素。
prevUntil() 返回被选元素之前直到匹配选择器的所有兄弟元素。

// 获取之后直到 class 为 'stop' 的所有兄弟元素
$("selector").nextUntil(".stop");

// 获取之前直到 class 为 'stop' 的所有兄弟元素
$("selector").prevUntil(".stop");

示例代码

假设有以下 HTML 结构：

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

获取 active 元素的兄弟元素：

// 获取所有兄弟元素
$(".active").siblings(); // 返回 Item 1, Item 3, Item 4

// 获取下一个兄弟元素
$(".active").next(); // 返回 Item 3

// 获取之前所有兄弟元素
$(".active").prevAll(); // 返回 Item 1

通过以上方法，可以灵活地操作 DOM 中的兄弟元素。