jQuery 兄弟

使用jQuery,我们可以轻松地在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 兄弟