03. JQuery 遍历元素

最新推荐文章于 2025-06-27 10:44:03 发布

Al_assad

最新推荐文章于 2025-06-27 10:44:03 发布

阅读量661

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： jquery 遍历文档

本文链接：https://blog.youkuaiyun.com/Al_assad/article/details/76093563

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了使用JQuery遍历DOM树的各种方法，包括遍历祖先元素、同胞元素及后代元素，并展示了如何利用过滤器方法进一步精确选择所需元素。

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

遍历祖先元素

Jquery 提供了以下的方法向上遍历DOM树：

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

以下示例

<html>
    <body>
        <div>
            <ul>
                <li id="#li1">item1</li>
                <li class="test">item2</li>
                <li>item3</li>
            </ul>
            <p>Jsut for Test</p>
        </div>
    </body>
</html>

//获取<li>的父元素
$("#li1").parent().css({"border":"2px solid red"});
//获取<li>的所有父元素
$("#li1").parents().css({"border":"2px solid red"});
//获取<li>的到<div>为止的所有父元素
$("#li1").parentUnitl("div").css({"border":"2px solid red"});

遍历同胞元素

Jquery 提供了以下的方法向遍历DOM树的同胞元素：

siblings()	返回被选元素的所有同胞元素。
next()	返回被选元素的下一个同胞元素
nextAll()	返回被选元素的后面的所有同胞元素
nextUntil()	返回介于两个给定参数之间的所有跟随的同胞元素
prev()	返回被选元素的上一个同胞元素
prevAll()	返回被选元素的前面的所有同胞元素
prevUntil()	返回介于两个给定参数之间的所有前面的同胞元素

这些方法的使用方式同遍历祖先元素的方法类似，同样都是返回一个或一组元素对象；

遍历后代元素

Jquery 提供了以下的方法向下遍历DOM树：

children()	返回被选元素的所下一层子元素
find()	返回被选元素的后代元素，一路向下直到最后一个后代

以下示例，使用上面的html文本作示例：

//返回div的所有下一层元素
$("div").children();      //返回<ul>,<p> 2个元素
//返回div元素所有子元素
$("div").find("*");      //返回<ul>,<p> 以及<ul>以下的所有<li>元素

遍历过滤器

Jquery 提供了以下的过滤器方法，可以用于在遍历元素时，添加过滤条件；

first()	返回被选元素的首个元素
last()	返回被选元素的最后一个元素
eq()	返回被选元素中带有指定索引号的元素（索引号从0开始）
filter()	过滤元素，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()	同上，不过返回不匹配标准的所有元素

以下示例，使用上面的html文本作示例：

//返回ul下第一个li元素
$("ul").children().first();         //返回item1
//返回ul下最后一个li元素
$("ul").children().last();          //返回item3
//返回ul下第2个li元素
$("ul").children().eq(1);          //返回item2
​
//返回ul元素下所有class="test"的li元素
$("ul").children().filter(".test");      //返回 item2
//返回ul元素下所有class！="test"的li元素
$("ul").children().not(".test");        //返回 item1，item3