jQuery对DOM元素的向上、向下、同级遍历和过滤

最新推荐文章于 2023-02-07 17:02:12 发布

转载最新推荐文章于 2023-02-07 17:02:12 发布 · 5.7k 阅读

文章标签：

#jquery

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了jQuery中元素遍历的方法，包括向下遍历（children()与find()）、向上遍历（.parent(), .parents(), .parentUntil()）以及同级（兄弟）遍历（siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()）等方法的使用技巧与区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

children()方法的元素遍历

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

find()方法的元素遍历

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

两者区别：
一、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()

例子如下：

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

JQuery siblings()

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

JQuery next()

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

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

JQuery nextAll()

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

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

JQuery nextUntil()

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

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

JQuery prev() & prevAll() & prevUntil()

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