举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历

前端技术 2023/09/06 JavaScript

一、jQuery的向下遍历

<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;
}

1.children()方法的元素遍历

$(document).ready( function (){
 $(\"#div1\").children().css({border:\"3px solid black\"});
});

可以看到此时div1的儿子div2的边框颜色变成了黑色。

2.find()方法的元素遍历

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

可以看到此时div1的重孙子a元素出现了灰色边框。、

.children()与.find()方法的区别是:children只能对元素的儿子元素进行修改，而find则可以对其所有的子元素进行修改。

二、jQuery的向上遍历
顾名思义，向上遍历就是从子集找到父集。

.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()则具有区间性质，将会遍历包含于区间中的所有元素。

三、遍历 - 同级（兄弟）
同级元素拥有相同的父级元素。

在 DOM 树中水平遍历。

有许多有用的方法让我们在 DOM 树进行水平遍历：

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

1.JQuery siblings()

siblings() 方法返回被选元素的所有同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>

$(document).ready(function () {
 // 获取h1标签的所有同级元素
 var elem = $(\'h1\').siblings();
 console.log(elem); // p p 
});

2.JQuery next()

next() 方法返回被选元素的下一个同胞元素

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>

$(document).ready(function () {
 // 获取h1标签的下一个同级元素
 var elem = $(\'h1\').next();
 console.log(elem); // p
});

3.JQuery nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>


$(document).ready(function () {
 // 获取p标签的后面的所有同级元素
 var elem = $(\'p\').nextAll();
 console.log(elem); // p
});

4.JQuery nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
 <h2>重点注意</h2>
</section>


$(document).ready(function () {
 // 获取
 var elem = $(\'h1\').nextUntil(\'h2\');
 console.log(elem); // p p 
});

5.JQuery prev() & prevAll() & prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同级元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

本文地址：https://www.stayed.cn/item/16870

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案