jQuery 遍历 - 兄弟(siblings)
使用jQuery,我们可以轻松地在DOM树中横向遍历以查找元素的同级。
兄弟元素是那些共享同一父元素的元素。
在本章中,我们将解释如何在DOM树中横向遍历。
在DOM树中横向遍历
我们有以下jQuery方法用于DOM树中的横向遍历:
本章将向您展示如何使用每种方法。
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遍历参考。