购物车
登陆 / 注册
微信扫码登陆

推荐手册

jQuery 教程手册(新) >> jQuery手册
其他教程参考

jQuery parents() 方法

jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素。
蹊下 蹊下 更新时间:2019-03-02 15:34:45

jQuery parents() 方法

定义和用法

parents() 方法返回被选元素的所有祖先元素。

祖先是父、祖父、曾祖父,依此类推。

DOM 树:该方法从父元素向上遍历 DOM 元素的祖先,直至文档根元素的所有路径(<html>)。

注意:如果 filter 参数为空,该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。

该方法与 closest() 都是向上遍历 DOM 树,不同点是:

parents()

  • 从父元素开始

  • 沿 DOM 树向上遍历,并返回匹配所传递的表达式的所有祖先

  • 返回包含零个、一个或多个元素的 jQuery 对象

closest()

  • 从当前元素开始

  • 沿 DOM 树向上遍历,并返回匹配所传递的表达式的第一个祖先

  • 返回包含零个或一个元素的 jQuery 对象

其他相关方法:

parent() : 返回被选元素的直接父元素

parentsUntil() : 返回两个给定参数之间的所有祖先元素

语法

$(selector).parents(filter)
参数描述
filter 

可选。规定缩小搜索祖先元素范围的选择器表达式

注意:如需返回多个祖先,请使用逗号分隔每个表达式。

实例

<style>
.ancestors *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父节点)
	<div style="width:500px;">div (曾祖父节点)
		<ul>ul (祖父节点)  
			<li>li (直接父节点)
				<span>span</span>
			</li>
		</ul>   
	</div>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号