Skip to content

jQuery 物件樹遍歷(DOM Traversal)是什麼?四類查找方法總覽

jQuery 物件樹遍歷:同層、父層、子層與過濾

依據 DOM 的相對關係來查找其他的 DOM,不管同層查找、子層查找,還是上層查找,甚至是篩選,這樣的查找被稱為 物件樹遍歷

為什麼不直接寫選取器就好

當起點是事件觸發的那個元素,或是同一個結構在頁面上重複出現很多份時,寫死的 選取器 沒辦法指到正確的那一份。從當下的元素往外找,程式才不會綁死在特定的 HTML 結構上。

同層

往左右查找,對象是與自己擁有同一個父元素的兄弟元素。方法依 方向數量 組合而成,清單、標籤頁這種同層重複出現的結構最常用到。

方法說明
next()同層下一個。
prev()同層上一個。
nextAll()同層後面的全部。
prevAll()同層前面的全部。
siblings()同層其他。

詳細用法請見 同層

父層

往上查找,差別只在於要不要一路找到底。最常見的用途是從被點擊的按鈕往上找到它所屬的那一列或那張卡片,再對整個容器做操作。

方法說明
parent()父層。
parents()全部的直屬父層。

詳細用法請見 父層

子層

往下查找,差別同樣在於深度:可以只看直屬的那一層,也可以走訪整棵子樹。範圍愈大掃的節點就愈多,結構夠明確時盡量限制在需要的那一層。

方法說明
children()子層全部(僅往下一層)。
find()所有後代中符合條件的元素。

詳細用法請見 子層

過濾方法

前面三類是往外找,這一類則是在已經取得的集合裡往內縮,可以依位置取,也可以再丟一個選取器進去篩。要留意位置一律 從 0 起算 ,和肉眼數的第幾個差一位。

方法說明
first()集合的第一個。
last()集合的最後一個。
eq()集合中指定索引位置的一個。
filter()依選取器過濾集合。

詳細用法請見 過濾方法

常見問題

為什麼不直接寫一個選取器就好?

當起點是 事件 觸發的那個元素,或是同一個結構重複出現很多份時,寫死的選取器沒辦法指到正確的那一份。從當下的元素往外找,程式才不會綁死在特定的 HTML 結構上。

遍歷方法可以一直串下去嗎?

可以。每個遍歷方法都會回傳新的集合,因此能一路接著找,只是串太長會讓程式難以閱讀,也更容易被 HTML 結構的調整弄壞。

找不到符合的元素會怎樣?

會回傳一個長度為 0 的空集合,後續的操作等於沒作用,不會拋出錯誤。

children 和 find 差在哪?

children() 只往下找一層的直屬子元素,find() 則會找遍所有後代層級。

這些方法都可以再加選取器篩選嗎?

大部分可以。傳入選取器之後,只有符合條件的結果會被留下,等於查找與 過濾 一次完成。

延伸閱讀

參考資料:jQuery API:Traversing