通过选择器一般只能获取指定标识的节点,或者获取子节点。
有些场景下,往往需要根据当前节点找到满足条件的父节点。这个可以通过相应的方法来实现。
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、小结
通过上面两个方法,加上各种条件设置,可以获取到各种条件的上层节点。