jquery兄弟节点

jQuery 兄弟节点操作方法

在 jQuery 中，可以通过多种方法选择和操作兄弟节点（即同一父元素下的其他子元素）。以下是常用的方法：

获取所有兄弟节点

使用 siblings() 方法可以获取当前元素的所有兄弟节点：

$("selector").siblings();

如果需要筛选特定类型的兄弟节点，可以传递一个选择器参数：

$("selector").siblings(".class-name");

获取相邻的下一个兄弟节点

使用 next() 方法获取紧邻的下一个兄弟节点：

$("selector").next();

也可以传递选择器参数进行筛选：

$("selector").next("p");

获取相邻的上一个兄弟节点

使用 prev() 方法获取紧邻的上一个兄弟节点：

$("selector").prev();

同样支持选择器筛选：

$("selector").prev(".highlight");

获取所有后续兄弟节点

使用 nextAll() 方法获取当前元素之后的所有兄弟节点：

$("selector").nextAll();

支持选择器筛选：

$("selector").nextAll("div");

获取所有之前的兄弟节点

使用 prevAll() 方法获取当前元素之前的所有兄弟节点：

$("selector").prevAll();

支持选择器筛选：

$("selector").prevAll("li");

获取直到某个元素前的兄弟节点

使用 nextUntil() 或 prevUntil() 方法可以获取当前元素到指定元素之间的所有兄弟节点：

$("selector").nextUntil(".stop-here");
$("selector").prevUntil(".stop-here");

实际应用示例

假设有以下 HTML 结构：

<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>

获取 .active 的所有兄弟节点：

$(".active").siblings(); // 返回 Item 1, Item 3, Item 4, Item 5

获取 .active 之后直到 .stop 的兄弟节点：

$(".active").nextUntil(".stop"); // 返回 Item 3, Item 4

注意事项

• 这些方法返回的是 jQuery 对象，可以链式调用其他 jQuery 方法。
• 如果未找到匹配的兄弟节点，返回的是空 jQuery 对象。
• 选择器参数可以接受任何有效的 CSS 选择器。