jquery中closest()parent() parents 區別

標籤：使用   text   tail   attribute   his   mod   idt   方式   dia   

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

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

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

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

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

 

[html] view plain copy 

1.  <ul id="menu" style="width:100px;">   
2.      <li>   
3.          <ul>   
4.              <li> <a href="#">Home</a> </li>  
5.          </ul>   
6.      </li>  
7.      <li>End</li>  
8.  </ul>    
9. 接下來，分別看看這三個方法：  
10.   
11.    
12.   <script type="text/javascript">  
13.     //點擊Home時   
14.      $("#menu a").click(function() {  
15.          $(this).parent("ul").css("background", "yellow"); //0   
16.          $(this).parent("li").parent("ul").css("background", "yellow"); //1  
17.          $(this).parents("ul").css("background", "yellow"); //2   
18.          $(this).closest("ul").css("background", "yellow"); //1;   
19.      });   
20.   </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()方法在項目中的使用頻率是比較大的。

jquery中closest()parent() parents 區別