通過選擇器一般只能獲取指定標識的節點,或者獲取子節點。
有些場景下,往往需要根據當前節點找到滿足條件的父節點。這個可以通過相應的方法來實現。
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、小結
通過上面兩個方法,加上各種條件設置,可以獲取到各種條件的上層節點。