jQuery 父層遍歷：parent() 與 parents() 的差別
選取父層元素的方法，屬於 物件樹遍歷 的一環。兩者的差別只在於 往上找幾層 。
parent()
取得當前元素的父層元素，可用選取器進行篩選。只往上找一層，因此最多回傳一個元素。
範例
html
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li id="Item">List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>js
$('#Item').parent().css('background-color', 'pink');parents()
取得當前元素的所有父層元素，可用選取器進行篩選。它會一路往上找到文件的根元素，因此結果會連 <body>、<html> 都收進來。
範例
html
<html>
...
<body>
<div>
<section>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li id="Item">List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
</section>
...
</div>
</body>
</html>js
$('#Item').parents().css('background-color', 'pink');只想要最近的那一個祖先
用 closest() 更合適。它從自己開始往上找，回傳第一個符合條件的元素就停下來，不會像 parents() 一樣把整條路徑都收進來。
js
// 從被點擊的按鈕往上找到它所屬的那一張卡片
$('.btn').on('click', function () {
$(this).closest('.card').addClass('active');
});常見問題
parent 和 parents 差在哪？
parent() 只往上找一層的直屬父元素，最多回傳一個；parents() 會一路往上找到根元素，回傳沿途所有的祖先元素。
為什麼 parents 的結果會包含 html 和 body？
因為它會一路往上找到文件的根元素，中間經過的每一層都會被收進集合裡。想限縮範圍就傳入選取器篩選。
想找最近的某個祖先該用哪個？
用 closest() 更合適。它從自己開始往上找，回傳第一個符合條件的元素就停下來，不會像 parents() 一樣把整條路徑都收進來。
事件處理裡常用父層查找做什麼？
最常見的是從被點擊的按鈕往上找到它所屬的那一列或那張卡片，再對整個容器做操作，這樣同一段程式就能套用在重複出現的結構上，概念與 事件委派 相通。
找不到父層會回傳什麼？
回傳空集合。對根元素呼叫父層查找，或篩選條件沒有任何祖先符合時，都會是這個結果。
