jquery兄弟元素

jQuery 兄弟元素选择方法

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

next()
选择当前元素的下一个同级元素。

$("#target").next();

prev()
选择当前元素的上一个同级元素。

$("#target").prev();

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

$("#target").siblings(); // 所有兄弟元素
$("#target").siblings(".class-name"); // 特定类名的兄弟元素

nextAll()
选择当前元素之后的所有同级元素。

$("#target").nextAll();

prevAll()
选择当前元素之前的所有同级元素。

$("#target").prevAll();

nextUntil() / prevUntil()
选择当前元素到指定元素之间的所有兄弟元素（不包括边界元素）。

$("#target").nextUntil(".stop-element");
$("#target").prevUntil(".stop-element");

示例代码

假设有以下 HTML 结构：

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

选择 #target 的兄弟元素：

// 下一个兄弟元素（Item 3）
$("#target").next();

// 上一个兄弟元素（Item 1）
$("#target").prev();

// 所有兄弟元素（Item 1, 3, 4, 5）
$("#target").siblings();

// 特定类名的兄弟元素（Item 4）
$("#target").siblings(".highlight");

// 之后的所有兄弟元素（Item 3, 4, 5）
$("#target").nextAll();

// 之前的所有兄弟元素（Item 1）
$("#target").prevAll();

注意事项

• 这些方法返回的是 jQuery 对象，可以链式调用其他 jQuery 方法。
• 如果未找到匹配的元素，返回的是一个空的 jQuery 对象。
• 可以通过传递选择器参数进一步筛选兄弟元素。