JQ 遍历祖先

yaocong

2016-11-14

祖先是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()，parents()，parentsUntil()

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ancestors * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
	<div style="width:500px;">div (曾祖父元素)
		<ul>ul (祖父元素)
			<li>li (父元素)
				<span>span</span>
			</li>
		</ul>
	</div>

	<div style="width:500px;">div (祖父元素)
		<p>p (父元素)
			<span>span</span>
		</p>
	</div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script>
/**
 * jQuery parent() 方法
 * parent() 方法返回被选元素的直接父元素。
 * 该方法只会向上一级对 DOM 树进行遍历。
 * 下面的例子返回每个 <span> 元素的的直接父元素：
 * */
$(function(){
	$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</body>
</html>

效果图：
JQ 遍历祖先

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ancestors * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
	<div style="width:500px;">div (曾祖父元素)
		<ul>ul (祖父元素)
			<li>li (父元素)
				<span>span</span>
			</li>
		</ul>
	</div>

	<div style="width:500px;">div (祖父元素)
		<p>p (父元素)
			<span>span</span>
		</p>
	</div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script>
/**
 * jQuery parents() 方法
 * parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
 * 下面的例子返回所有 <span> 元素的所有祖先：
 * */
$(function(){
	$("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</body>
</html>

效果图：
JQ 遍历祖先

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ancestors * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
	<div style="width:500px;">div (曾祖父元素)
		<ul>ul (祖父元素)
			<li>li (父元素)
				<span>span</span>
			</li>
		</ul>
	</div>

	<div style="width:500px;">div (祖父元素)
		<p>p (父元素)
			<span>span</span>
		</p>
	</div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script>
/**
 * 也可以使用可选参数来过滤对祖先元素的搜索。
 * 下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
 * */
$(function(){
	$("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</body>
</html>

效果图：
JQ 遍历祖先

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ancestors * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
	<div style="width:500px;">div (曾祖父元素)
		<ul>ul (祖父元素)
			<li>li (父元素)
				<span>span</span>
			</li>
		</ul>
	</div>

	<div style="width:500px;">div (祖父元素)
		<p>p (父元素)
			<span>span</span>
		</p>
	</div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script>
/**
 * jQuery parentsUntil() 方法
 * parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
 * 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
 * */
$(function(){
	$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</body>
</html>

效果图：
JQ 遍历祖先