当前位置：首页 > jquery

jquery兄弟节点

2026-03-16 09:42:26jquery

jQuery 兄弟节点操作方法

在 jQuery 中，可以通过多种方法选择和操作兄弟节点（即与当前元素同级的其他元素）。以下是常用的方法：

获取所有兄弟节点

使用 siblings() 方法可以获取当前元素的所有兄弟节点，无论其类型如何。例如：

$('#target').siblings();

获取特定类型的兄弟节点

可以通过传递选择器参数来筛选特定类型的兄弟节点。例如，获取所有 class 为 active 的兄弟节点：

$('#target').siblings('.active');

获取相邻的下一个兄弟节点

使用 next() 方法可以获取当前元素的下一个兄弟节点：

jquery兄弟节点

$('#target').next();

获取相邻的上一个兄弟节点

使用 prev() 方法可以获取当前元素的上一个兄弟节点：

$('#target').prev();

获取所有后续兄弟节点

使用 nextAll() 方法可以获取当前元素之后的所有兄弟节点：

jquery兄弟节点

$('#target').nextAll();

获取所有之前的兄弟节点

使用 prevAll() 方法可以获取当前元素之前的所有兄弟节点：

$('#target').prevAll();

获取直到某个元素的兄弟节点

使用 nextUntil() 或 prevUntil() 方法可以获取当前元素之后或之前直到匹配选择器的兄弟节点。例如：

$('#target').nextUntil('.stop');
$('#target').prevUntil('.stop');

示例代码

以下是一个完整的示例，展示如何操作兄弟节点：

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

<script>
  // 获取所有兄弟节点
  $('#target').siblings().css('color', 'red');

  // 获取下一个兄弟节点
  $('#target').next().css('font-weight', 'bold');

  // 获取上一个兄弟节点
  $('#target').prev().css('text-decoration', 'underline');
</script>

通过这些方法，可以灵活地选择和操作兄弟节点，实现动态的 DOM 操作效果。