JQuery获取兄弟元素详解

LUBPM • 2025-04-23 00:48 • 编程

一、.siblings()方法

.siblings()方法返回与选定元素在同一层级的所有兄弟元素。示例如下：

  
  $(document).ready(function(){
    $("h1").siblings().css({"color": "red", "border": "2px solid red"});
  });

上述代码会选中所有h1元素的兄弟元素，并将它们的颜色以及边框样式改成红色。

.siblings(selector)方法可以通过指定选择器来筛选兄弟元素。示例如下：

  
  $(document).ready(function(){
    $("h1").siblings("p").css({"color": "red", "border": "2px solid red"});
  });

这段代码会选中所有h1元素下的p元素，并将它们的样式改为红色。

二、.next()和.prev()方法

.next()方法返回选中元素紧接着的下一个同级元素，而.prev()方法返回选中元素紧接着的上一个同级元素。

  
  $(document).ready(function(){
    $("h1").next().css({"color": "red", "border": "2px solid red"});
  });

上述代码会选中所有h1元素下的第一个同级元素，并将它的颜色以及边框样式改成红色。

.next(selector)和.prev(selector)方法可以通过指定选择器来筛选下一个/上一个同级元素。

  
  $(document).ready(function(){
    $("h1").next("p").css({"color": "red", "border": "2px solid red"});
  });

这段代码会选中所有h1元素下的第一个p元素，并将它们的样式改为红色。

三、.nextAll()和.prevAll()方法

.nextAll()方法返回选中元素之后所有的同级元素，.prevAll()方法返回选中元素之前的所有同级元素。

  
  $(document).ready(function(){
    $("h1").nextAll().css({"color": "red", "border": "2px solid red"});
  });

上述代码选中所有h1元素之后的同级元素，并将它们的样式改为红色。

.nextAll(selector)和.prevAll(selector)方法可以通过指定选择器来筛选下一个/上一个同级元素。

  
  $(document).ready(function(){
    $("h1").nextAll("p").css({"color": "red", "border": "2px solid red"});
  });

这段代码会选中所有h1元素之后的p元素，并将它们的样式改为红色。

四、.nextUntil()和.prevUntil()方法

.nextUntil()方法返回选中元素之后，一直到指定元素之前的所有同级元素。.prevUntil()和.prevAll()方法类似。

  
  $(document).ready(function(){
    $("h1").nextUntil("ul").css({"color": "red", "border": "2px solid red"});
  });

这段代码会选中所有h1元素之后，到最近的ul元素之前的所有同级元素，并将它们的样式改为红色。

五、小结

通过上述五个方法，我们可以方便地获取兄弟元素。.siblings()方法适用于所有兄弟元素的情况，.next()和.prev()方法适用于紧接着的下一个或上一个元素，.nextAll()和.prevAll()方法适用于一段区间内的所有同级元素，.nextUntil()和.prevUntil()方法适用于指定区间内的所有同级元素。

原创文章，作者：LUBPM，如若转载，请注明出处：https://www.506064.com/n/371429.html