DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jq使用parent和parents方法獲取父節點
jq使用parent和parents方法獲取父節點
編輯:JQuery特效代碼     
Jquery學習筆記:利用parent和parents方法獲取父節點

通過選擇器一般只能獲取指定標識的節點,或者獲取子節點。

有些場景下,往往需要根據當前節點找到滿足條件的父節點。這個可以通過相應的方法來實現。

1、parent方法

該方法可以獲取元素的直接父節點。

我們還是通過例子來說明

<div>
 <p id="pid"></p>
 <span class="cspan"></span>
 <div>
  <a id="aid"></a>
  <span>test</span>
 </div>
</div>

js代碼如下

  var obj = $("#aid").parent(); //獲取到的是aid元素的直接父節點div元素
  alert(obj.html());

可以指定parent方法的參數,如 $("#aid").parent("div") 來檢查父節點是否滿足特定的條件。

 

2、parents方法

該方法可以獲取元素所有上層節點(直到根節點)的集合。如:

<html>

<body>

<div class="mydiv">
 <p id="pid"></p>
 <span class="cspan"></span>
 <div>
  <a id="aid"></a>
  <span>test</span>
 </div>
</div>

</body>

</html>

js代碼

  var obj = $("#aid").parents(); //一共獲得4個父節點,div>div>body>html
  obj.each(function(index,data){
   alert($(data).prop("tagName"));
  });

可以通過給parents方法加參數來有條件的選擇父節點。

如 $("#aid").parents("div") 只返回節點標簽為DIV的 上層節點集合。

如 $("#aid").parents(".mydiv")  只返回節點包含樣式mydiv 的 上層節點集合。

 

3、小結

通過上面兩個方法,加上各種條件設置,可以獲取到各種條件的上層節點。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved