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");
});