jQuery 向上遍歷 DOM 樹完全解析：parent()、parents()、closest() 差異與實戰選型

jQuery 提供三種向上遍歷祖先元素的方法，雖然名稱相似但行為差異極大。搞清三者機制，能精準選取目標元素，避免效能浪費與邏輯錯誤。本文以圖解、程式碼示範與對比表完整釐清。

方法簽名與核心差異速查

程式碼示範與結果對比

<div>
  <p>
    <span>
      <b>My parents</b>
    </span>
  </p>
</div>

// 以 <b> 為起點
$('b').parents();   // → [span, p, div, body, html] (jQuery 物件，由內而外)
$('b').parent();    // → [span]
$('b').closest('p'); // → [p] (自身不符合，向上找第一個 p)
$('b').closest('b'); // → [b] (自身符合，直接回傳)

關鍵行為深度解析

1. parent()：單層、集合對應

• 集合中每個元素各自取父層，結果合併去重。
• 選擇器用於過濾父層，而非子元素。例：$('a').parent('.nav') 取所有 <a> 的父層中 class 為 nav 者。

2. parents()：全祖先鏈、由內而外

• 回傳順序固定：最近祖先在前，<html> 在最後。
• 搭配選擇器可快速篩選：$('#deep').parents('div.container')。
• 效能較 closest() 低，因需走訪完整樹並建立完整集合。

3. closest()：含自身、短路優化

• 從自身開始向上，找到第一個符合選擇器即停止。
• 回傳 0 或 1 個元素 的 jQuery 物件，非陣列。
• 事件委派常用模式：$(e.target).closest('.item') 找到被點擊的列表項根節點。

實戰選型決策樹

需要包含自身嗎？ → 是 → closest()
                    ↓ 否
只需父層？ → 是 → parent()
           ↓ 否
需所有祖先或多重篩選？ → 是 → parents()
                     ↓ 否
需第一個符合條件的祖先？ → closest(selector)

效能微調建議

• 已知目標層級固定 (如父層) → parent() 最快。
• 事件委派尋找容器 → closest() 短路機制最優。
• 需收集所有符合條件祖先 → parents(selector)。
• 避免在大型 DOM 樹中頻繁呼叫 parents() 無選擇器版本。

常見陷阱

1. closest() 選擇器必填，無預設值。
2. parents() 不包含自身，closest() 包含。
3. parent() 對集合中每個元素各取父層，結果可能包含同層級不同父元素。

掌握三者語意邊界，即能寫出精準、高效的 DOM 遍歷邏輯。