jquery查找同级元素

jQuery查找同级元素的方法

在jQuery中，查找同级元素可以通过多种方法实现。以下是常用的几种方式：

siblings()方法 siblings()方法用于选取当前元素的所有同级元素（不包括自身）。可以传入选择器进行筛选：

$("#target").siblings(); // 获取所有同级元素
$("#target").siblings(".class-name"); // 获取指定class的同级元素

next()和prev()方法 next()获取紧邻的下一个同级元素，prev()获取紧邻的上一个同级元素：

$("#target").next(); // 下一个同级元素
$("#target").prev(); // 上一个同级元素

nextAll()和prevAll()方法 nextAll()获取之后的所有同级元素，prevAll()获取之前的所有同级元素：

$("#target").nextAll(); // 之后所有同级元素
$("#target").prevAll(); // 之前所有同级元素

nextUntil()和prevUntil()方法 nextUntil()和prevUntil()可以获取到指定元素之间的同级元素：

$("#target").nextUntil(".stop-element"); // 获取直到.stop-element的同级元素
$("#target").prevUntil(".stop-element"); // 获取直到.stop-element的同级元素

结合选择器直接查找 可以通过父元素结合选择器直接查找同级元素：

$("#target").parent().children(".sibling-class"); // 通过父元素查找指定class的同级

实际应用示例

假设有以下HTML结构：

<ul>
  <li class="item">Item 1</li>
  <li class="item active">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
</ul>

获取.active元素的所有同级：

$(".active").siblings(); // 返回Item 1, 3, 4

获取.active之后的所有同级：

$(".active").nextAll(); // 返回Item 3, 4

获取.active和最后一个li之间的元素：

$(".active").nextUntil("li:last"); // 返回Item 3