html文件
<html data="祖先6">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body data="祖先5">
<button id="test1">jQuery遍历祖先</button>
<button id="test2">模拟遍历祖先</button>
<ul class="level-1" data="祖先4">
<li class="item-i">I</li>
<ul class="level-2" data="祖先3">
<li class="item-b" data="祖先2">
<ul class="level-3" data="祖先1">
<li class="item-1">1</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
</body>
</html>
js文件
<script>
var ajQuery={};
function dir(elem,dir,until){
//设置一个数组
var matched=[],
//如果unit不是undefind就赋值给truncate
truncate=until!==undefined;
//把父元素设为当前元素，如果元素nodetype不为document（就是window最高层）,则执行循环【依靠这一点进行遍历】
while((elem=elem[dir])&&elem.nodeType!==9){
//节点类型为element
if(elem.nodeType===1){
if(truncate){
//如果节点名称为until,或者节点类名为unit则跳出循环
if(elem.nodeName.toLowerCase()==until||elem.className==until){
break;
}
}
//如果没有定义truncate,默认遍历到document
matched.push(elem);
}
}
//返回所有的父元素数组
return matched
}
jQuery.each({
//获取一级父元素方法
parent:function(elem){
var parent=elem.parentNode;
//如果父元素为轻量级文档对象，则设为null
return parent&&parent.nodeType!=11?parent:parent=null;
},
parents:function(elem){
//返回父元素数组
return dir(elem,"parentNode");
},
parentsUntil:function(elem,until){
//返回有截止点的父元素数组
return dir(elem,"parentNode",until);
}
},function(name, fn) {
ajQuery[name] = function(until, selector) {
return fn(until, selector);
};
})
$("#test1").click(function() {
var item = $('.item-1');
alert(item.parent()[0])
for(var i= 0,j=item.parents().length;i<j;i++){
alert(item.parents().eq(i).attr("data"))
}
alert(item.parentsUntil('body').length)
})
$("#test2").click(function() {
var item = document.querySelectorAll('.item-1')[0]
alert(ajQuery.parent(item))
for(var i= 0,j=ajQuery.parents(item).length;i<j;i++){
alert(ajQuery.parents(item)[i].getAttribute("data"))
}
alert(ajQuery.parentsUntil(item, 'body').length)
})
</script>
可以发现遍历结构是通过把父元素设为当前元素来遍历的，上面的代码 parent：弹出当前一级父元素，祖先1， parents:遍历到html弹出到祖先6 parentsUntil:遍历到body,弹出到祖先4
This work is licensed under a CC A-S 4.0 International License.