例
返回的所有祖先元素<span>
$(document).ready(function(){
$("span").parents().css({"color":
"red", "border": "2px solid red"});
});
结果:
body (great-great-grandparent)
div (great-grandparent)
ul (grandparent)
- li (direct parent)
span
试一试» 定义和用法
该parents()方法返回所选元素的所有祖先元素。
祖先是父母,祖父母,曾祖父母,依此类推。
DOM树:此方法从父元素遍历向上沿DOM元素的祖先,直到文档的根元素一路(<html>)
注意:如果过滤参数为空,这个函数将选择一组元素的所有祖先,从直接父并一路到<body>和<html> 因此,常常是有用的,以传递一个选择器表达式来缩小搜索结果。
此方法类似于closest()因为它们既向上遍历DOM树。 的不同之处如下:
parents()
- 与父元素开始
- 游记了DOM树,并返回所传递的表达式匹配所有祖先
- 返回的jQuery对象包含零或一个以上的元素
closest()
- 与当前元素开始
- 游记了DOM树,并返回所传递的表达式匹配的始祖
- 返回的jQuery对象包含零或一个元素
其他相关的方法:
- parent() -返回所选元素的直接父元素
- parentsUntil() -返回两个给定的参数之间的所有祖先元素
句法
$(selector).parents( filter )
参数 | 描述 |
---|---|
类=“notranslate”新增过滤器 | 可选的。 指定选择器表达式来缩小为祖先搜索 注意:要返回多个祖先,每个表达式用逗号分隔。 |
试一试 - 示例
缩小搜索范围
如何使用过滤器参数返回的所有祖先<span>是<ul>元素。
返回多个祖先
如何使用过滤器参数返回的所有祖先<span>是<li>和<div>元素。
显示元素的按标签名祖先
演示,显示一个谁的祖先<span>元素实际上是。