JQuery中遍历元素的父辈和祖先

来源：互联网发布：大卫罗宾逊数据编辑：程序博客网时间：2024/05/22 15:13

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("某个祖先")

0 0