jquery 兄弟

jQuery 兄弟元素选择方法

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

siblings()

选择当前元素的所有兄弟元素（不包括自身）。

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

next()

选择当前元素的下一个兄弟元素。

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

nextAll()

选择当前元素之后的所有兄弟元素。

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

prev()

选择当前元素的上一个兄弟元素。

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

prevAll()

选择当前元素之前的所有兄弟元素。

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

nextUntil() 和 prevUntil()

选择当前元素之后或之前的兄弟元素，直到匹配指定的选择器。

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

示例代码

假设有以下 HTML 结构：

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

选择所有兄弟元素

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

选择下一个兄弟元素

$("#target").next().css("color", "blue");

选择之前的所有兄弟元素

$("#target").prevAll().css("color", "green");

选择直到 .stop 的兄弟元素

$("#target").nextUntil(".stop").css("color", "orange");

注意事项

• 这些方法返回的是 jQuery 对象，可以链式调用其他 jQuery 方法。
• 如果未找到匹配的兄弟元素，返回的 jQuery 对象为空（不会报错）。