.parents()
返回: jQuery
.parents( [selector ] )
描述：获得匹配的元素的当前集合中的每个元素的祖先元素，视情况用一个选择器作筛选。
给定一个代表DOM元素的集合的jQuery对象，.parents()方法允许我们搜遍这些元素在DOM树中的祖先元素，并根据匹配的元素构造一个新的jQuery对象，从最紧挨的父元素向上排序；返回的元素以最接近的父元素到最外层元素排序。如果在原始集合中有多个DOM元素，返回的集合将是原来元素以相反的顺序排序， 并且重复删除项。
.parents()和.parent()方法是近似的，除了后者只会在DOM树中向上遍历一层。而且，$( "html" ).parent()入法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。
该方法可视情况接受一个选择器表达式，与我们可以传递给$()函数的选择器表达式类型相同。如果提供了这个选择器，将对元素作筛选，测试它是否匹配选择器。
设想一个网页带有一个基本的嵌套列表：
<ul class="level-1">
<li class="item-i">I</li>
<li 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">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
如果我们从项目A开始，我们可以找到它的祖先元素：
$( "li.item-a" ).parents().css( "background-color", "red" );
这次调用的结果是，针对第二层列表，item II，和第一层列表（并在DOM树中向上遍历，直到<html>元素）变成红色背景。因为我们没有提供选择器，所以所有的祖先元素都成了返回的jQuery对象的一部分。如果我们提供了一个选择器表达式，只有匹配这个表达式的元素才会包括在内。
示例
找到每个<b>的所有父元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>parents demo</title>
<style>
b, span, p, html body {
padding: .5em;
border: 1px solid;
}
b {
color: blue;
}
strong {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<p>
<span>
<b>My parents are: </b>
</span>
</p>
</div>
<script>
var parentEls = $( "b" ).parents()
.map(function() {
return this.tagName;
})
.get()
.join( ", " );
$( "b" ).append( "<strong>" + parentEls + "</strong>" );
</script>
</body>
</html>
演示结果
点击以找到每个<span>的所有独一无二的div父元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>parents demo</title>
<style>
p, div, span {
margin: 2px;
padding: 1px;
}
div {
border: 2px white solid;
}
span {
cursor: pointer;
font-size: 12px;
}
.selected {
color: blue;
}
b {
color: red;
display: block;
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
<div>
<div><span>Hello</span></div>
<span>Hello Again</span>
</div>
<div>
<span>And Hello Again</span>
</div>
</p>
<b>Click Hellos to toggle their parents.</b>
<script>
function showParents() {
$( "div" ).css( "border-color", "white" );
var len = $( "span.selected" )
.parents( "div" )
.css( "border", "2px red solid" )
.length;
$( "b" ).text( "Unique div parents: " + len );
}
$( "span" ).click(function() {
$( this ).toggleClass( "selected" );
showParents();
});
</script>
</body>
</html>
演示结果