前端必知必会-jQuery 遍历 - 兄弟元素

---

jQuery 遍历 - 兄弟元素

使用 jQuery，您可以在 DOM 树中横向遍历以查找元素的兄弟元素。

兄弟元素共享同一个父元素。

在 DOM 树中横向遍历

有许多有用的 jQuery 方法可用于在 DOM 树中横向遍历：

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

jQuery brothers() 方法

siblings() 方法返回所选元素的所有兄弟元素。

以下示例返回 <h2> 的所有兄弟元素：

示例

$(document).ready(function(){
$("h2").siblings();
});

您还可以使用可选参数来过滤兄弟元素的搜索。

以下示例返回 <h2> 中所有属于 <p> 元素的兄弟元素：

示例

$(document).ready(function(){
$("h2").siblings("p");
});

jQuery next() 方法

next() 方法返回所选元素的下一个兄弟元素。

以下示例返回 <h2> 的下一个兄弟元素：

示例

$(document).ready(function(){
$("h2").next();
});

jQuery nextAll() 方法

nextAll() 方法返回所选元素的所有下一个兄弟元素。

以下示例返回 <h2> 的所有下一个兄弟元素：

示例

$(document).ready(function(){
$("h2").nextAll();
});

jQuery nextUntil() 方法

nextUntil() 方法返回两个给定参数之间的所有下一个兄弟元素。

以下示例返回 <h2> 和 <h6> 元素之间的所有同级元素：

示例

$(document).ready(function(){
$("h2").nextUntil("h6");
});

jQuery prev()、prevAll() 和 prevUntil() 方法

prev()、prevAll() 和 prevUntil() 方法的工作方式与上述方法相同，但具有反向功能：它们返回前一个同级元素（沿 DOM 树中的同级元素向后遍历，而不是向前遍历）。

---

总结

本文介绍了jQuery 遍历 - 兄弟元素的使用，如有问题欢迎私信和评论