当前位置：首页 > jquery

jquery获取同级元素

2026-02-03 22:25:37jquery

jQuery获取同级元素的方法

在jQuery中，获取同级元素可以通过多种方式实现，以下是一些常用的方法：

使用siblings()方法 siblings()方法可以获取当前元素的所有同级元素，不包括自身。可以通过选择器进一步筛选特定的同级元素。

// 获取所有同级元素
$("#target").siblings();

// 获取特定类型的同级元素（例如class为"sibling-class"的元素）
$("#target").siblings(".sibling-class");

使用next()和prev()方法 next()方法获取当前元素的下一个同级元素，prev()方法获取当前元素的上一个同级元素。

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

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

// 获取下一个满足条件的同级元素（例如class为"next-class"的元素）
$("#target").next(".next-class");

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

// 获取之后的所有同级元素
$("#target").nextAll();

// 获取之前的所有同级元素
$("#target").prevAll();

// 获取之后满足条件的同级元素（例如class为"next-all-class"的元素）
$("#target").nextAll(".next-all-class");

使用nextUntil()和prevUntil()方法 nextUntil()方法获取当前元素之后直到匹配选择器的元素之间的所有同级元素，prevUntil()方法获取当前元素之前直到匹配选择器的元素之间的所有同级元素。

// 获取之后直到class为"stop"的元素之间的所有同级元素
$("#target").nextUntil(".stop");

// 获取之前直到class为"stop"的元素之间的所有同级元素
$("#target").prevUntil(".stop");

通过父元素和子元素选择 可以通过父元素选择所有子元素，再排除当前元素来获取同级元素。

// 获取所有同级元素（通过父元素选择）
$("#target").parent().children().not("#target");

// 获取特定类型的同级元素（例如class为"sibling"的元素）
$("#target").parent().children(".sibling").not("#target");

示例代码

以下是一个完整的示例，展示如何获取同级元素：

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

<script>
  // 获取所有同级元素
  var siblings = $("#target").siblings();
  console.log(siblings); // 输出: [li.item, li.item, li.item.special, li.item]

  // 获取下一个同级元素
  var next = $("#target").next();
  console.log(next); // 输出: [li.item]

  // 获取class为"special"的同级元素
  var specialSibling = $("#target").siblings(".special");
  console.log(specialSibling); // 输出: [li.item.special]
</script>