肉渣教程

jQuery 同辈

上一节 下一节

jQuery遍历 - 同辈(Siblings)

拥有同一个父元素的都是同辈。

向边路遍历DOM树

jQuery提供了多种常用的方法来向边路遍历DOM树:

  • siblings()
  • next()
  • nextAll()
  • newUnitl()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings()方法

siblings()方法可返回指定元素所有的同辈元素。

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

运行一下

当然,也可以传入筛选条件,即返回指定元素所有符合筛选条件的同辈元素。如下例所示,返回同辈元素中所有的p元素:

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

运行一下

jQuery next()方法

next()方法返回指定元素的同辈元素中紧邻的下一个元素。

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

运行一下

jQuery nextAll()方法

nextAll()方法返回指定元素之后的所有的同辈元素。

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

运行一下

jQuery nextUntil()方法

nextUntil()方法依次向指定元素后面的同辈元素遍历并返回,直到出现符合结束条件的同辈元素结束。(但是符合结束条件的同辈元素不包括在内)

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

运行一下

jQuery prev()、prevAll()、prevUntil()方法

prev()、prevAll()、prevUntil()方法与next()、nextAll()、nextUntil()方法类似,只是prev是向前的意思,即向前遍历;因为过于类似,在此就不展开介绍了,以此类推就ok啦~


jQuery 同辈

上一节 下一节