jquery兄弟选择器

jQuery 兄弟选择器

jQuery 提供了多种选择器用于选取兄弟元素（即与当前元素同级的其他元素）。以下是常见的兄弟选择器及其用法：

相邻兄弟选择器（+）

选取紧接在指定元素后的第一个兄弟元素：

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

一般兄弟选择器（~）

选取指定元素之后的所有兄弟元素：

$("#target ~ .sibling").css("font-weight", "bold");

.siblings() 方法

选取所有兄弟元素（包括前后）：

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

.next() 方法

选取紧邻的下一个兄弟元素：

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

.nextAll() 方法

选取之后的所有兄弟元素：

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

.prev() 方法

选取紧邻的上一个兄弟元素：

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

.prevAll() 方法

选取之前的所有兄弟元素：

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

过滤兄弟元素

可以在方法中使用选择器进一步过滤：

$("#target").siblings(".active").toggle();
$("#target").next(".special").css("background", "yellow");

注意事项

• 兄弟选择器仅匹配同级元素，不会跨层级。
• 链式调用可以组合多个兄弟选择方法：

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

• 这些方法返回的都是 jQuery 对象，可以直接调用其他 jQuery 方法。