$.closest()

最新推荐文章于 2024-01-30 14:35:54 发布

352328759

最新推荐文章于 2024-01-30 14:35:54 发布

阅读量2.8k

点赞数 1

分类专栏： Jquery 介绍文章标签： jquery closest

本文链接：https://blog.csdn.net/u013970232/article/details/87103568

版权

介绍同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Jquery

11 篇文章 0 订阅

订阅专栏

返回被选元素的第一个祖先元素：
$(selector).closest(filter)

返回使用 DOM context 查找的 DOM 树中的第一个祖先元素：
context: 上下文, 语境, 范围
$(selector).closest(filter,context)

filter 必需。规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象
context 可选。在其内可以找到匹配元素的 DOM 元素

closest()
从当前元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个单一祖先
返回包含零个或一个元素的 jQuery 对象
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止
参数不能为空

parents()
从父元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先
返回包含零个、一个或多个元素的 jQuery 对象
沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选
参数可以为空

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Cache-Control" CONTENT="no-cache" />
		<meta http-equiv="Pragma" CONTENT="no-cache" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>$.closest() 的简单例子</title>
		<style type="text/css">
			li { margin: 3px; padding: 3px; background: #EEEEEE; }
			.hilight { background: yellow; }
		</style>
	</head>

	<body>

		<ul id="one" class="level-1">
			<li class="item-i">I</li>
			<li id="ii" class="item-ii">II
				<ul class="level-2">
					<li class="item-a">A</li>
					<li class="item-b">B
						<ul class="level-3">
							<li class="item-1">我们可以传递 DOM 元素作为 context，在其中搜索最接近的元素</li>
							<li class="item-2">context: 上下文, 语境, 范围</li>
							<li class="item-3">.closest('ul', context)</li>
						</ul>
					</li>
					<li class="item-c">C</li>
				</ul>
			</li>
			<li class="item-iii">III</li>
		</ul>

	</body>

	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript" th:inline="javascript">
		$(document).bind("click", function(e) {
			$(e.target).closest("li").toggleClass("hilight");
		});

		var listItemII = document.getElementById('ii');
		$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
		$('li.item-a').closest('#one', listItemII).css('background-color', 'green');
	</script>

</html>

352328759

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
$.closest()

返回被选元素的第一个祖先元素：$(selector).closest(filter)返回使用 DOM context 查找的 DOM 树中的第一个祖先元素：context: 上下文, 语境, 范围$(selector).closest(filter,context)filter 必需。规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象context 可选。在其内可以...
复制链接

扫一扫