如何在jQuery查找元素父节点?

JavaScript05

如何在jQuery查找元素父节点?,第1张

jquery获取父元素比如parent(),parents,closest(),这些都可以查找父元素或节点,具体步骤如下:

一.parent([expr])

用一个包含着所有匹配元素的唯一父元素的元素集合。

你用可选的表达式来筛选。

如下:

1.$('#item1').parent().parent;

二.parent

得到含有子元素或者文本的元素

如下:

1.$('li:parent')

2.parents([expr])

得到一个包含着所有匹配元素的祖先元素的元素集合。可以通过一个可选的表达式进行筛选。

如下:

1.$('#items').parents('.parent1')

三.closest([expr])

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

1、打开编辑工具editplus,点击editplus菜单栏上的【File】-->New -->HTML page。

2、新建好html页面后,editplus自动帮助我们生成了框架,先把title修改下,然后保存。

3、在body区域里添加了子,父,祖父三级div,代码如下。

4、演示代码写好后,打开浏览器,在浏览器上运行看看效果。

5、下面在head区域里添加实现js获取最高父级的代码,代码具体如下,这样利用了while循环来判断的。

6、实现好后,保存代码,此时再到浏览器上刷新访问,看下,此时弹出对话框告诉最后父级是zufu。

这样:

<ul class="parent1">

    <li><a href="#" id="item1">jquery获取父节点</a></li>

    <li><a href="#">jquery获取父元素</a></li>

</ul>

扩展资料:

注意事项

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

可以看出parent的取值很明确,就是当前元素的父元素;parents则是当前元素的祖先元素。

<div id='div1'>

<div id='div2'><p></p>

</div><div id='div3' class='a'><p></p></div>

<div id='div4'><p></p></div>

</div>