当前位置：首页 > jquery

jquery获取兄弟元素

2026-02-03 23:52:48jquery

jQuery 获取兄弟元素的方法

在 jQuery 中，可以通过多种方法获取当前元素的兄弟元素。以下是几种常用的方法：

1. siblings() 方法 siblings() 方法返回当前元素的所有兄弟元素（不包括自身）。可以通过选择器进一步筛选特定的兄弟元素。

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

// 获取 class 为 "highlight" 的兄弟元素
$("#target").siblings(".highlight");

2. next() 和 nextAll() 方法 next() 方法返回当前元素的下一个兄弟元素（紧邻的单个元素），而 nextAll() 返回当前元素之后的所有兄弟元素。

jquery获取兄弟元素

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

// 获取之后所有兄弟元素
$("#target").nextAll();

// 获取之后 class 为 "item" 的所有兄弟元素
$("#target").nextAll(".item");

3. prev() 和 prevAll() 方法 prev() 方法返回当前元素的上一个兄弟元素（紧邻的单个元素），而 prevAll() 返回当前元素之前的所有兄弟元素。

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

// 获取之前所有兄弟元素
$("#target").prevAll();

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

4. nextUntil() 和 prevUntil() 方法 nextUntil() 返回当前元素之后直到匹配选择器的所有兄弟元素，prevUntil() 返回当前元素之前直到匹配选择器的所有兄弟元素。

jquery获取兄弟元素

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

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

5. 通过父元素和子元素索引获取 可以通过父元素和子元素索引获取特定的兄弟元素。

// 获取父元素下所有子元素（包括自身）
var children = $("#target").parent().children();

// 获取当前元素的索引
var index = $("#target").index();

// 获取下一个兄弟元素（通过索引）
var nextSibling = children.eq(index + 1);

// 获取上一个兄弟元素（通过索引）
var prevSibling = children.eq(index - 1);

示例代码

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

<ul>
  <li class="item">Item 1</li>
  <li class="item highlight">Item 2</li>
  <li id="target">Item 3 (Target)</li>
  <li class="item">Item 4</li>
  <li class="item end">Item 5</li>
</ul>

<script>
  // 获取所有兄弟元素
  var siblings = $("#target").siblings();
  console.log("All siblings:", siblings);

  // 获取下一个兄弟元素
  var next = $("#target").next();
  console.log("Next sibling:", next);

  // 获取上一个兄弟元素
  var prev = $("#target").prev();
  console.log("Previous sibling:", prev);

  // 获取之后直到 class 为 "end" 的所有兄弟元素
  var nextUntil = $("#target").nextUntil(".end");
  console.log("Next until .end:", nextUntil);
</script>

通过这些方法，可以灵活地获取当前元素的兄弟元素，并根据需求进一步筛选或操作。