祖先是父、祖父或曾祖父等等。
通过 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>
效果图：
<!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>
效果图：
<!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>
效果图：
<!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>
效果图：