jQuery 遍历 - 兄弟(siblings)

使用jQuery，我们可以轻松地在DOM树中横向遍历以查找元素的同级。

兄弟元素是那些共享同一父元素的元素。

在本章中，我们将解释如何在DOM树中横向遍历。

在DOM树中横向遍历

我们有以下jQuery方法用于DOM树中的横向遍历：

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

本章将向您展示如何使用每种方法。

jQuery siblings()方法

jQuery siblings()方法返回所选元素的所有同级元素。

以下示例返回类名称为“ middle”的每个<li>元素的所有同级元素：

$(document).ready(function(){
  $("li.middle").siblings().css("background-color", "lightgreen");
});

您还可以使用可选参数来过滤对同级的搜索。

下面的示例返回每个列表项的类为“ bold”的所有同级：

$(document).ready(function(){
  $("li").siblings(".bold").css("background-color", "lightgreen");
});

jQuery next()方法

jQuery next()方法返回紧跟在所选元素之后的下一个同级元素。

下面的示例返回每个DIV元素的下一个同级元素：

$(document).ready(function(){
  $("div").next().css("background", "lightblue");
});

jQuery nextAll()方法

jQuery nextAll()方法返回所选元素的所有下一个同级元素。

下面的示例返回每个DIV元素的所有下一个同级元素：

$(document).ready(function(){
  $("div").nextAll().css("background", "lightblue");
});

jQuery prev()方法

jQuery prev()方法返回上一个兄弟元素，该兄弟元素紧邻所选元素。

下面的示例返回每个DIV元素的上一个同级元素：

$(document).ready(function(){
  $("div").prev().css("background", "lightblue");
});

jQuery prevAll()方法

jQuery prevAll()方法返回所选元素的所有先前的同级元素。

下面的示例返回每个DIV元素的所有先前的同级元素：

$(document).ready(function(){
  $("div").prevAll().css("background", "lightblue");
});

jQuery nextUntil()和prevUntil()方法

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

jQuery prevUntil()方法返回两个给定参数之间的所有先前的同级元素。

以下示例返回在<dt id="term-2">之后直到下一个<dt>的所有下一个同级：

$(document).ready(function(){
  $("#term-2").nextUntil("dt").css("background-color", "coral");
});

以下示例返回<dt id="term-2">之前的所有兄弟姐妹，直至之前的<dt>：

$(document).ready(function(){
  $("#term-2").prevUntil("dt").css("background-color", "coral");
});

jQuery遍历参考

有关完整的遍历方法参考，请访问我们的jQuery遍历参考。