博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery学习笔记:利用parent和parents方法获取父节点
阅读量:6274 次
发布时间:2019-06-22

本文共 850 字,大约阅读时间需要 2 分钟。

通过选择器一般只能获取指定标识的节点,或者获取子节点。

有些场景下,往往需要根据当前节点找到满足条件的父节点。这个可以通过相应的方法来实现。

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、小结

通过上面两个方法,加上各种条件设置,可以获取到各种条件的上层节点。

转载地址:http://ymrpa.baihongyu.com/

你可能感兴趣的文章
Linux下的lds链接脚本简介(二)
查看>>
入门到进阶React
查看>>
C++每日练笔之日期类(基类)
查看>>
SVN 命令笔记
查看>>
修复Postfix 的Relay access denied问题
查看>>
检验手机号码
查看>>
重叠(Overlapped)IO模型
查看>>
ffmpeg study 1
查看>>
Git使用教程
查看>>
使用shell脚本自动监控后台进程,并能自动重启
查看>>
Flex&Bison手册
查看>>
MySQL 5.6 for Windows 解压缩版配置安装
查看>>
solrCloud+tomcat+zookeeper集群配置
查看>>
/etc/fstab,/etc/mtab,和 /proc/mounts
查看>>
Apache kafka 简介
查看>>
socket通信Demo
查看>>
技术人员的焦虑
查看>>
js 判断整数
查看>>
建设网站应该考虑哪些因素
查看>>
mongodb $exists
查看>>