jquery中closest()與parents()的方法差別分析總結

在jquery中parents()查找父級元素删除的時候，發現它不包含根元素，于是用了closest()，效果不錯，下面我給大家具體的介紹

closest() 方法獲得比對選擇器的第一個祖先元素，從目前元素開始沿 dom 樹向上

參數selector為字元串值，用以過濾比對元素的擇器表達式

參數context可選,作為待查找的 dom 元素集或者文檔

closet(selector,context)中context參數的用法:從目前元素開始周遊到context元素結束，若不存在context參數周遊到根結點;由此可見使用context參數可以提高查詢效率

.parents() 和 .closest() 方法類似，它們都用于沿 dom 樹向上周遊,比對元素的選擇器字元串。兩者之間的差異盡管微妙，卻很重要：

.closest()

.parents()

從目前元素開始

從父元素開始

沿dom樹向上周遊直到找到已應用選擇器的一個比對為止

沿dom樹向上周遊直到文檔的根元素為止,将每個祖先元素添加到一個臨時的集合;如果應用了選擇器，則會基于該選擇器對這個集合進行篩選

傳回包含零個或一個元素的 jquery 對象

傳回包含零個、一個或多個元素的 jquery 對象

先看下面的示例：示範如何通過 closest() 完成事件委托。當被最接近的清單元素或其子後代元素被點選時，會切換黃色背景

1、當滑鼠點選“you can also”時顔色出現變化。這是因為closest是從目前元素開始向上周遊的。而不同于parents()方法，是從目前元素的父元素開始向上周遊

2、當點選click me!時，顔色也會變化。這同樣經過上面步驟，從目前元素向上比對，隻不過<b>不符合條件，再往上時遇見了</b>