遍歷祖先
祖先是父、祖父或曾祖父等等。
通過(guò) jQuery，能夠向上遍歷 DOM 樹(shù)，以查找元素的祖先。
向上遍歷 DOM 樹(shù)，這些 jQuery 方法很有用，它們用于向上遍歷 DOM 樹(shù)：
parent()
parents()
parentsUntil()
.parent()方法允許我們能夠在DOM樹(shù)中搜索到這些元素的父級(jí)元素，從有序的向上匹配元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象。
.parents()和.parent()方法是相似的，但后者只是進(jìn)行了一個(gè)單級(jí)的DOM樹(shù)查找
.parentsUntil() 方法會(huì)找遍所有這些元素的前輩元素，直到遇到了跟參數(shù)匹配的元素才會(huì)停止。返回的jQuery對(duì)象中包含了所有找到的前輩元素，除了與 .parentsUntil() 選擇器匹配的那個(gè)元素。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<button id="test1">jQuery遍歷祖先</button>
<button id="test2">模擬遍歷祖先</button>
<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>
<script type="text/javascript">
function parent(elem) {
var parent = elem.parentNode;
return parent && parent.nodeType !== 11 ? parent : null;
}
function parents(elem){
var matched = [];
while ( (elem = elem[ 'parentNode' ]) && elem.nodeType !== 9 ) {
if ( elem.nodeType === 1 ) {
matched.push( elem );
}
}
return matched;
}
function parentsUntil(elem, filter) {
var matched = [],
until,
truncate = filter !== undefined;
while ((elem = elem['parentNode']) && elem.nodeType !== 9) {
if (elem.nodeType === 1) {
if (truncate) {
if(elem.nodeName.toLowerCase() ==filter){
break;
}
}
matched.push(elem);
}
}
return matched;
}
$("#test1").click(function(){
var item = $('.item-1');
alert(item.parent()[0])
alert( item.parents().length)
alert( item.parentsUntil('body').length)
})
$("#test2").click(function(){
var item = document.querySelectorAll('.item-1')[0]
alert(parent(item))
alert(parents(item).length)
alert(parentsUntil(item, 'body').length)
})
</script>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
