Traversing on DOM

Traversing on DOM

本文內容有:

• 使用 traverse method (方法)
• first()
• last()
• next()
• children()
• closest()
• nextAll()
• nextUntil()
• offsetParent()
• parent()
• parents()
• parentsUntil()
• prev()
• prevUntil()
• siblings()

下圖的例子中，要找出所有的 li ，當然可以使用: $("destinations li")，不過，效能的關係會建議使用 traverse method，$("#destinations").find("li")，兩者結果是相同的，但後者的執行效能比較佳。

first(): 符合條件的第一個元素

 1: $("li").first();

last(): 符合條件的最後一個元素

 1: $("li").last();

next(): 符合條件的下一個元素

下圖中的第一行程式與第三行程式的結果是相同的。

 1: $("li").first();

 2: $("li").first().next();

 3: $("li").first().next().prev();

children():子代的所有元素

closest(): 最靠近的元素(不管往上或往下)

nextAll(): 往下的所有元素，可給參數，表示為往下至參數選擇子為止的所有元素

nextUntil(): 往上的所有元素，可給參數，表示為往上至參數選擇子為止的所有元素

offsetParent(): 該選擇器的第一個父元素

parent():該選擇器(s)的父元素

parents():該選擇器(s)的祖先元素

parentsUntil():該選擇器(s)往下的祖先元素，可給參數，表示為往下至參數選擇子為止的所有元素

prev():往上緊鄰的同輩元素

prevUntil():往上緊鄰的同輩元素，至參數選擇子為止

siblings():同輩元素