jquery 同胞

jQuery 同胞元素选择方法

在jQuery中，同胞元素（siblings）指的是共享同一个父元素的元素。以下是几种常用的选择同胞元素的方法：

siblings() siblings()方法选择当前元素的所有同胞元素，可以传入选择器进行过滤。

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

next() next()方法选择当前元素的下一个同胞元素。

$("#target").next(); // 选择下一个同胞
$("#target").next("div"); // 选择下一个div同胞

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

$("#target").nextAll(); // 选择之后所有同胞
$("#target").nextAll("p"); // 选择之后所有p同胞

prev() prev()方法选择当前元素的上一个同胞元素。

$("#target").prev(); // 选择上一个同胞
$("#target").prev("li"); // 选择上一个li同胞

prevAll() prevAll()方法选择当前元素之前的所有同胞元素。

$("#target").prevAll(); // 选择之前所有同胞
$("#target").prevAll(".item"); // 选择之前所有class为item的同胞

nextUntil() / prevUntil() 这两个方法选择当前元素到指定元素之间的同胞元素。

$("#target").nextUntil(".stop"); // 选择之后直到class为stop的同胞
$("#target").prevUntil("#end"); // 选择之前直到id为end的同胞

示例代码

以下是一个完整的示例，展示如何使用这些方法：

// HTML结构
<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>

// jQuery代码
$("#target").siblings().css("color", "red"); // 所有同胞变红
$("#target").next().css("font-weight", "bold"); // 下一个同胞加粗
$("#target").prev().css("text-decoration", "underline"); // 上一个同胞加下划线
$("#target").nextUntil(".stop").css("background", "yellow"); // 直到.stop的同胞背景变黄

注意事项

• 这些方法返回的是jQuery对象，可以链式调用其他jQuery方法。
• 如果未找到匹配的元素，返回空的jQuery对象。
• 传入的选择器可以是任何有效的CSS选择器。