最新的Web開發教程
 

jQuery遍歷 - 兄弟姐妹


兄弟姐妹共享相同的父。

與jQuery你可以橫著遍歷DOM樹找到一個元素的兄弟姐妹。


在DOM樹遍歷側身

有許多有用的jQuery方法在DOM樹遍歷橫盤整理:

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

jQuery的siblings()方法

siblings()方法返回所選元素的所有兄弟元素。

下面的示例返回所有同級元素<h2>

$(document).ready(function(){
    $("h2").siblings();
});
試一試»

你也可以使用一個可選的參數來篩選兄弟姐妹搜索。

下面的示例返回所有同級元素<h2><p>元素:

$(document).ready(function(){
    $("h2").siblings("p");
});
試一試»

jQuery的next()方法

next()方法返回所選元素的下一個同級元素。

下面的示例返回的下一個兄弟<h2>

$(document).ready(function(){
    $("h2").next();
});
試一試»

jQuery的nextAll()方法

nextAll()方法返回所選元素的所有下一個同級元素。

下面的示例返回所有的下一個同級元素<h2>

$(document).ready(function(){
    $("h2").nextAll();
});
試一試»

jQuery的nextUntil()方法

nextUntil()方法返回兩個給定的參數之間的所有下一個同級元素。

下面的示例返回之間的所有同級元素<h2> A和<h6>元素:

$(document).ready(function(){
    $("h2").nextUntil("h6");
});
試一試»

jQuery的prev(), prevAll() & prevUntil()方法

prev(), prevAll()prevUntil()方法的工作方式就像上面,但與反向功能的方法:他們返回前一個兄弟元素(沿DOM樹同級元素向後遍歷,而不是向前)。


自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5» 練習6»


jQuery的參考遍歷

對於所有的jQuery遍歷方法完整概述,請訪問我們的jQuery遍歷參考