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啦~