jQuery 遍歷 - 兄弟(siblings)

使用jQuery，我們可以輕松地在DOM樹中橫向遍歷以查找元素的同級。

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

在本章中，我們將解釋如何在DOM樹中橫向遍歷。

在DOM樹中橫向遍歷

我們有以下jQuery方法用于DOM樹中的橫向遍歷：

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

本章將向您展示如何使用每種方法。

jQuery siblings()方法

jQuery siblings()方法返回所選元素的所有同級元素。

以下示例返回類名稱為“ middle”的每個(gè)<li>元素的所有同級元素：

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

您還可以使用可選參數(shù)來過濾對同級的搜索。

下面的示例返回每個(gè)列表項(xiàng)的類為“ bold”的所有同級：

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

jQuery next()方法

jQuery next()方法返回緊跟在所選元素之后的下一個(gè)同級元素。

下面的示例返回每個(gè)DIV元素的下一個(gè)同級元素：

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

jQuery nextAll()方法

jQuery nextAll()方法返回所選元素的所有下一個(gè)同級元素。

下面的示例返回每個(gè)DIV元素的所有下一個(gè)同級元素：

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

jQuery prev()方法

jQuery prev()方法返回上一個(gè)兄弟元素，該兄弟元素緊鄰所選元素。

下面的示例返回每個(gè)DIV元素的上一個(gè)同級元素：

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

jQuery prevAll()方法

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

下面的示例返回每個(gè)DIV元素的所有先前的同級元素：

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

jQuery nextUntil()和prevUntil()方法

jQuery nextUntil()方法返回兩個(gè)給定參數(shù)之間的所有下一個(gè)同級元素。

jQuery prevUntil()方法返回兩個(gè)給定參數(shù)之間的所有先前的同級元素。

以下示例返回在<dt id="term-2">之后直到下一個(gè)<dt>的所有下一個(gè)同級：

$(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遍歷參考

有關(guān)完整的遍歷方法參考，請?jiān)L問我們的jQuery遍歷參考。