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

推荐手册

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

jQuery closest() 方法

jQuery closest() 方法
closest() 方法返回被选元素的第一个祖先元素。
蹊下 蹊下 更新时间:2019-03-02 15:47:37

jQuery closest() 方法

定义和用法

closest() 方法返回被选元素的第一个祖先元素。

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

DOM 树:该方法从当前元素向上遍历,直至文档根元素的所有路径(<html>),来查找 DOM 元素的第一个祖先元素。

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

closest()

从当前元素开始沿 DOM 树向上遍历,并返回匹配所传递的表达式的第一个单一祖先返回包含零个或一个元素的 jQuery 对象

parents()

从父元素开始沿 DOM 树向上遍历,并返回匹配所传递的表达式的所有祖先返回包含零个、一个或多个元素的 jQuery 对象

其他相关方法:

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

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

语法

返回被选元素的第一个祖先元素:

$(selector).closest(filter)

返回使用 DOM context 查找的 DOM 树中的第一个祖先元素:

$(selector).closest(filter,context)
参数描述
filter 必需。规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象。  
context 可选。在其内可以找到匹配元素的 DOM 元素。    


实例

<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").closest("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

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

运行实例 »

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

效果图:

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