jQuery对DOM元素的向上遍历

最新推荐文章于 2022-08-30 17:59:09 发布

前行的道路

最新推荐文章于 2022-08-30 17:59:09 发布

阅读量365

点赞数

本文链接：https://blog.csdn.net/fanfanzk1314/article/details/77947915

版权

向上遍历 DOM 树有以下几种方法：

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()：返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil()：返回介于两个给定元素之间的所有祖先元素。

具体如下：

<script src="../JS/Extend.js"></script>
 <script src="../JS/my.js"></script>
 <link type="text/css" rel="stylesheet" href="../CSS3/my.css">
 
</head>
<body>
<div id="div1">
 <div id="div2">
  <p id="p1">
   <a>hello world</a>
  </p>
 </div>
</div>
 
#div1{
 width:500px;
 height:200px;
 border:3px solid coral;
}
 
#div2{
 width:400px;
 height:150px;
 margin-top:10px;
 margin-left:10px;
 border: 3px solid coral;
}
 
#p1{
 margin-left:10px;
 margin-top:10px;
 width:150px;
 height:80px;
 border:3px solid coral;
}

.parent()
$(document).ready( function (){
 $("#div2").parent().css({border:"3px solid black"});
 });

div2的父元素div1边框发生了改变

.parents()
$(document).ready( function (){
 $("a").parents().css({border:"3px solid grey"});
});

a元素除外，a元素的所有父级元素都发生了改变

.parentUntil()
$(document).ready( function (){
  $("a").parentsUntil("#div1").css({border:"3px solid grey"})
});

从a元素到div1元素之前的元素边框发生了改变。

三个方法的区别是：.parent()只能向上遍历一层；.parents()则可以指定父级元素的id进行跨越遍历；.parentUntil()则具有区间性质，将会遍历包含于区间中的所有元素。

前行的道路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对DOM元素的向上遍历

向上遍历 DOM 树这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：parent()：返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。parentsUntil()：返回介于两个给定元素之间的所有祖先元素。 hello
复制链接

扫一扫