jQuery向上遍曆DOM樹之parents(),parent(),closest()之間的區別
這篇文章主要是對jQuery向上遍曆DOM樹之parents(),parent(),closest()之間的區別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所協助
在這個sprint中，因為要寫前端UI，所以用到了jQuery，但是jQuery在向上遍曆DOM樹的API中，有parents()、 parent()、closest()這幾個，一直不太清楚它們具體的區別，所以狠下心好好讀了一下jQuery的API文檔，並把區別記在這裡，以供參考。
1.parents([selector])
本方法用於選擇給定jQuery對象中包含的DOM元素或者DOM元素集的祖先節點，並將這些節點封裝成jQuery對象返回，返回的節點集是以從裡到外的順序排序的。
同時，本方法還接受一個字串選取器，用於從返回的節點集中篩選符合選取器的子項目集。
2.parent([selector])
本方法用於選擇給定jQuery對象中包含的DOM元素或者DOM元素集的父節點。它和parents()不同的是，它只向上搜尋一層，而parents()會搜尋整個DOM樹。
本方法也可以接受一個字串選取器，用於篩選返回的元素。
有人可能會問：一個DOM元素的父元素不是只有一個麼，為什麼還要一個selector選取器進行篩選呢？其實一個jQuery對象可能包含有很多個DOM元素，例如$('a').parent()就是選擇所有<a>標籤的父元素，這樣返回的就是一個元素集，所以可以進行篩選。
3.closest(selector)
本方法用於向上遍曆jQuery對象中包含的DOM元素或者DOM元素集的祖先節點，直到找到符合selector選取器的節點為止。
它和parents()的區別：
closest()從自身開始向上遍曆，直到找到一個適合的節點，返回的jQuery對象包含0個或者1個對象；
parents()從自身的父節點開始向上遍曆，返回所有祖先節點，並根據選取器對這些節點進行篩選，最終返回的jQuery對象可能包含0、1或者多個對象。
一個能說明區別的例子：
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>a test document</title>
</head>
<body>
<div>
<p>
<span>
<b>My parents</b>
</span>
</p>
</div>
</body>
</html>
在上述文檔中：
$('b').parents()將返回：由span、p、div、body、html等元素構造的jQuery對象；
$('b').parent()將返回：由span構造的jQuery對象；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
