jquery兄弟选择器

jQuery兄弟选择器用法

jQuery提供了多种选择器用于选取目标元素的兄弟元素（即同级元素）。以下是常用的兄弟选择器及其使用方法：

1. siblings() 方法 选取目标元素的所有兄弟元素（不包括自身）。

$("#target").siblings(); // 选取#target的所有兄弟元素
$("#target").siblings(".class"); // 选取#target的所有class为".class"的兄弟元素

2. next() 方法 选取目标元素的下一个兄弟元素。

$("#target").next(); // 选取#target的下一个兄弟元素
$("#target").next("div"); // 选取#target的下一个div兄弟元素

3. nextAll() 方法 选取目标元素之后的所有兄弟元素。

$("#target").nextAll(); // 选取#target之后的所有兄弟元素
$("#target").nextAll("p"); // 选取#target之后的所有p标签兄弟元素

4. nextUntil() 方法 选取目标元素之后直到指定选择器匹配元素之前的所有兄弟元素。

$("#target").nextUntil(".stop"); // 选取#target之后直到遇到class为".stop"的元素之前的所有兄弟元素

5. prev() 方法 选取目标元素的上一个兄弟元素。

$("#target").prev(); // 选取#target的上一个兄弟元素
$("#target").prev("span"); // 选取#target的上一个span标签兄弟元素

6. prevAll() 方法 选取目标元素之前的所有兄弟元素。

$("#target").prevAll(); // 选取#target之前的所有兄弟元素
$("#target").prevAll("li"); // 选取#target之前的所有li标签兄弟元素

7. prevUntil() 方法 选取目标元素之前直到指定选择器匹配元素之前的所有兄弟元素。

$("#target").prevUntil(".stop"); // 选取#target之前直到遇到class为".stop"的元素之前的所有兄弟元素

8. CSS选择器 ~ 和 +

• + 相邻兄弟选择器：选取紧接在目标元素后的第一个兄弟元素。

  $("#target + div"); // 选取紧接在#target后的第一个div兄弟元素

• ~ 通用兄弟选择器：选取目标元素后的所有指定兄弟元素。

  $("#target ~ p"); // 选取#target后的所有p标签兄弟元素

示例代码

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

// 选取#target的所有兄弟li元素
$("#target").siblings("li");

// 选取#target的下一个兄弟元素
$("#target").next();

// 选取#target之前的所有兄弟元素直到.stop
$("#target").prevUntil(".stop");

以上方法可根据实际需求灵活组合使用，实现对兄弟元素的精确选择。