文章标签 ‘获取父节点’

jquery 获取父节点

2013年3月31日 没有评论

在使用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的主要区别是:

  1. 前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找
  2. 前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤
  3. 前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素
分类: web前端 标签:

无觅相关文章插件,快速提升流量