jquery parent() parents() closest()區別

摘於網絡

 

parent是找當前元素的第一個父節點，不管匹不匹配都不繼續往下找

parents是找當前元素的所有父節點 

closest() 是找當前元素的所有父節點 ，直到找到第一個匹配的父節點

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>  
接下來，分別看看這三個方法：

 
  <script type="text/javascript">
	//點擊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; 
     }); 
  </script>

　　

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()方法在項目中的使用頻率是比較大的。