后代是子、孫、曾孫等等。

通過 jQuery，您能夠向下遍歷 DOM 樹，以查找元素的后代。

向下遍歷 DOM 樹

下面是兩個用于向下遍歷 DOM 樹的 jQuery 方法：

• children()
• find()

jQuery children() 方法

children() 方法返回被選元素的所有直接子元素。

該方法只會向下一級對 DOM 樹進行遍歷。

下面的例子返回每個 <div> 元素的所有直接子元素：

實例

$(document).ready(function(){  $("div").children();});

您也可以使用可選參數來過濾對子元素的搜索。

下面的例子返回類名為 "1" 的所有 <p> 元素，并且它們是 <div> 的直接子元素：

實例

$(document).ready(function(){  $("div").children("p.1");});

jQuery find() 方法

find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。

下面的例子返回屬于 <div> 后代的所有 <span> 元素：

實例

$(document).ready(function(){  $("div").find("span");});

下面的例子返回 <div> 的所有后代：

實例

$(document).ready(function(){  $("div").find("*");});

在 DOM 樹中水平遍歷

有許多有用的方法讓我們在 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> 與 <h6> 元素之間的所有同胞元素：

實例

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

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

　　prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞元素向后遍歷，而不是向前）。

縮寫搜索元素的范圍

三個最基本的過濾方法是：first(), last() 和 eq()，它們允許您基于其在一組元素中的位置來選擇一個特定的元素。

其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標準的元素。

jQuery first() 方法

first() 方法返回被選元素的首個元素。

下面的例子選取首個 <div> 元素內部的第一個 <p> 元素：

實例

$(document).ready(function(){  $("div p").first();});

jQuery last() 方法

last() 方法返回被選元素的最后一個元素。

下面的例子選擇最后一個 <div> 元素中的最后一個 <p> 元素：

實例

$(document).ready(function(){  $("div p").last();});

jQuery eq() 方法

eq() 方法返回被選元素中帶有指定索引號的元素。

索引號從 0 開始，因此首個元素的索引號是 0 而不是 1。下面的例子選取第二個 <p> 元素（索引號 1）：

實例

$(document).ready(function(){  $("p").eq(1);});

jQuery filter() 方法

filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。

下面的例子返回帶有類名 "intro" 的所有 <p> 元素：

實例

$(document).ready(function(){  $("p").filter(".intro");});

jQuery not() 方法

not() 方法返回不匹配標準的所有元素。

提示：not() 方法與 filter() 相反。

下面的例子返回不帶有類名 "intro" 的所有 <p> 元素：

實例

$(document).ready(function(){  $("p").not(".intro");});