jquery .parents(), .parent() 和 closest()方法

parent是找當前元素的第一個父節點，parents是找當前元素的全部父節點

parent()、parents()與closest()方法兩兩之間有相似又有不一樣，本篇簡短的區分一下這三個方法。經過本篇內容，你們將會在之後使用.parent()、parents()和closest()時不會顯得無從下手。

咱們直接看例子來來講明一下這三個方法的使用區別：

 <ul id="menu" style="width:100px;"> 

        <li> 

               <ul> 

                       <li> 

                               <a href="#">Home</a> 

                       </li> 

               </ul> 

        </li> 

        <li>

        End

        </li> 

</ul>

接下來，分別看看這三個方法：

//點擊Home時 

$("#menu a").click(function() { 

        $(this).parent("ul").css("background", "yellow"); //0 

        $(this).parent("li").parent("ul").css("background", "yellow"); //1 

        $(this).parents("ul").css("background", "yellow"); //2 

        $(this).closest("ul").css("background", "yellow"); //3 

return false; });   

1.parent()方法從指定類型的直接父節點開始查找，在"0"中，<a>的直接父節點是<li>因此在這裏找不到<ul>父節點。在"2"中先找到了<li>，接着找到<ul>，並將它的背景色設置爲yellow。parent()返回一個節點。

2.parents()方法查找方式同parent()方法相似，不一樣的一點在於，當它找到第一的父節點時並無中止查找，而是繼續查找，最後返回多個父節點，如在"2"中，使得id爲menu的ul整個背景色變成了yellow。

3.closest()方法查找時從包含自身的節點找起，它同parents()很相似，不一樣點就在於它只返回一個節點如在"3"中，實現的功能同1相同。但它使得代碼量減少，同"2"相比又只返回單一的一個節點。可見，closest()方法在項目中的使用頻率是比較大的。

 

可是注意一點: 

看jQuery官方的解釋:

closest(expr,[context]|object|element)

概述

jQuery 1.3新增。從元素自己開始，逐級向上級元素匹配，並返回最早匹配的元素。。

closest會首先檢查當前元素是否匹配，若是匹配則直接返回元素自己。若是不匹配則向上查找父元素，一層一層往上，直到找到匹配選擇器的元素。若是什麼都沒找到則返回一個空的jQuery對象。

closest和 parents的主要區別是：1，前者從當前元素開始匹配尋找，後者從父元素開始匹配尋找；2，前者逐級向上查找，直到發現匹配的元素後就中止了，後者一 直向上查找直到根元素，而後把這些元素放進一個臨時集合中，再用給定的選擇器表達式去過濾；3，前者返回0或1個元素，後者可能包含0個，1個，或者多個 元素。

closest對於處理事件委託很是有用。 

 

這裏parents()方法雖然是將查詢到的元素都放在 了一個臨時集合中, 可是它並非按照正常Dom結構放的, 而是按照查詢的順序放到臨時容器中的, 至關因而原始文檔的倒序放置方式. 注意: 這裏倒序的意思是說: 元素的存放位置是倒序的, 例如: :first:, :last 等存放的順序是倒序的. 

由於closest() 函數逐級向上查找，直到發現匹配的元素後就中止了, 所以它不支持 過濾選擇器 tr:first 等選擇器, 而 parents() 是要從多個元素中選擇出來一個適合的, 所以它可使用過濾選擇器. 

例如: 

$(this).closest("tr").remove();

$(this).parents("tr:first").remove();