jquery 获取父节点 html,jquery 获取父节点

在使用jquery时,很多时候都需要获取当前节点的父节点,包括直接父节点和祖先父节点。用的最多的方法是parent([expr])和parents([expr])。从方法的名字上就可以判断前一个方法是单数,也就是返回一个真正的父节点,后面是返回所有的祖先节点集合(不包含根节点)。假设需要获取当前节点的祖父节点(父节点的父节点),其有属性class=”pp”,那么获取的方法为:

$('#cur').parent().parent();

$('#cur').parent().parent('.pp');

$('#cur').parent('.pp');

上述操作在理想情况下,都没有问题。例如后来修改页面,在当前节点上又加了一个父节点,那么前两种获取的到的节点就不是当初节点;另外如果其祖先节点中还有属性class=”pp” 的节点,第三种获取的节点也不是自己想要的。

现在介绍另外一个获取父节点的方法closest([expr])。closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。否则返回一个空的jquery对象。

$('#cur').closest('.pp');

使用上述操作获取含义特定属性的祖父节点相对要安全一些,即使在当前节点和祖父节点中增加或者减少节点,只要增加的节点没有相同的属性,已有的js代码可能都不需要进行修改。

最后说一下closest和parents的主要区别是:

前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找

前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤

前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素

欢迎转载,转载请注明文章出处,谢谢!

24a340721a166160cab45e6a15cb2f31.gif

24a340721a166160cab45e6a15cb2f31.gif

24a340721a166160cab45e6a15cb2f31.gif

a47ec74fb946d08023fe841fa68d5a93.gif

a47ec74fb946d08023fe841fa68d5a93.gif (1 人打了份: 平均分:3.00)

de97c697c2b8529346aa2c4163373ddb.gifLoading...

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值