JQery 遍历
基本概念
父 子 后代 同胞
具体的概念可以下载W3School离线手册
下面举出一个例子来说明在JQuery中遍历元素
的父辈和祖先！
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":button").click(function(){
//$("#info").html($("#a4").parent().attr("id"));//用attr来获取id的属性
$("#a4").parents().each(function(i, e) {//这里的e和i都是可以改变的,通过each方法来遍历元素的祖先和父辈
$("#info").html($("#info").html()+"第"+i+"个祖先:"+$(this).attr("id"))+"/t";//在JQuery里面不允许使用e.attr,不然结果得不出来,可以在javscrtipt中使用
});
});
});
</script>
<body>
<input type="button" value="测试">
<div id="info"></div>
<div id="a1">
<div id="a2">
<div id="a3">
<div id="a4">
</div>
</div>
</div>
</div>
</body>
</html>
显示的结果为：第0个祖先:a3第1个祖先:a2第2个祖先:a1第3个祖先:undefined第4个祖先:undefined
遍历了元素的所有祖先
其中第一个undefined是<body>,第二个undefined是<html>,由此说明<html>是所有元素的祖先
其实还可以在元素的某个祖先上遍历完，就是指定在元素的某个祖先遍历完了，就不再继续往后遍历
方法为： $("#a4").parentsUntil("某个祖先")