jQuery 遍历 - 兄弟


使用 jQuery,您可以在 DOM 树中横向遍历以查找元素的同级元素。

兄弟姐妹有同一个父母。


在 DOM 树中横向遍历

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

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

jQuery的siblings()方法

这个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()方法返回两个给定参数之间的所有下一个兄弟元素。

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

示例

$(document).ready(function(){
  $("h2").nextUntil("h6");
});
亲自试一试 »

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

这个prev(),prevAll()prevUntil()方法的工作方式与上面的方法类似,但具有反向功能:它们返回先前的同级元素(沿着 DOM 树中的同级元素向后遍历,而不是向前遍历)。


jQuery 练习

通过练习测试一下

练习:

使用 jQuery 方法获取 <h2> 元素的所有同级元素。

$("h2").();

开始练习


jQuery 遍历参考

有关所有 jQuery 遍历方法的完整概述,请访问我们的jQuery 遍历参考