jquery兄弟

jQuery 兄弟元素选择方法

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

siblings() siblings()方法选择当前元素的所有兄弟元素，不包括自身。可以传入选择器参数进行筛选：

$("#target").siblings(); // 选择所有兄弟
$("#target").siblings(".active"); // 选择class为active的兄弟

next() next()方法选择紧邻的下一个兄弟元素：

$("#target").next(); // 下一个兄弟
$("#target").next("div"); // 下一个div兄弟

prev() prev()方法选择紧邻的上一个兄弟元素：

$("#target").prev(); // 上一个兄弟
$("#target").prev("p"); // 上一个p标签兄弟

nextAll() nextAll()选择当前元素之后的所有兄弟元素：

$("#target").nextAll(); // 之后所有兄弟
$("#target").nextAll("li"); // 之后所有li兄弟

prevAll() prevAll()选择当前元素之前的所有兄弟元素：

$("#target").prevAll(); // 之前所有兄弟
$("#target").prevAll(".item"); // 之前所有class为item的兄弟

nextUntil()/prevUntil() 这两个方法可以选择直到某个元素为止的兄弟：

$("#target").nextUntil(".stop"); // 之后直到遇到.stop类的兄弟
$("#target").prevUntil("#end"); // 之前直到遇到#id为end的兄弟

示例代码

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

// 选择所有兄弟
$("#target").siblings().css("color", "red");

// 选择下一个兄弟
$("#target").next().css("font-weight", "bold");

// 选择直到.stop的所有后续兄弟
$("#target").nextUntil(".stop").addClass("highlight");

注意事项

• 这些方法返回的都是jQuery对象，可以链式调用其他jQuery方法
• 如果选择器没有匹配到元素，返回的是空jQuery对象
• 这些方法都不包含元素自身，只操作兄弟元素