Web前段--JQuery遍历

最新推荐文章于 2022-07-14 13:42:52 发布

原创最新推荐文章于 2022-07-14 13:42:52 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #web

WEB前段基础同时被 2 个专栏收录

10 篇文章

订阅专栏

WEB后端

5 篇文章

订阅专栏

本文详细介绍了jQuery中遍历元素的方法，包括祖先、后代、同胞和过滤等操作，通过实例展示了如何使用parent()、parents()、children()、find()、sibling()等函数进行DOM树的遍历。

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

jQuery遍历——祖先

parent() 找到被选元素的父元素
parents() 找到被选元素的所有祖先，可以使用参数来过滤对祖先元素的搜索
parentsUntil()两个元素之间的所有祖先元素
以第三个为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" rel="stylesheet">
        body,div{
            border: lightgray solid 2px ;
            color :lightgray;
            width: 300px;
            height: 300px;
            text-align: center;
        }
    </style>
    <script src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("span").parentsUntil("div").css({
               "border":"red solid 4px ",
                "color":"red"
            });
        });
    </script>
</head>
<body>
        body<br>
        <div>div<br>
        <ul>ul<br>
            <li>li<br>
                <span>span</span>
            </li>
        </ul>
        </div>
</body>
</html>

jQuery遍历——后代

children()–只遍历被选元素的直接子元素
find()–遍历被选元素的所有后代,一直向下直到找到最后一个后代

jQuery遍历——同胞

method	describe
sibling()	返回被选元素的所有同胞（可以使用参数来过滤对同胞元素的搜索）
next()	返回被选元素的下一个同胞元素
prev()	返回被选元素的上一个同胞元素
nextAll()	返回被选元素的后面的所有同胞元素
prevAll()	返回被选元素的前面所有的同胞元素
nextUntil()	返回同胞之间的元素(前面_后面)
prevUntil()	返回同胞之间的元素(后面_前面)

jQuery遍历——过滤

method	describe
first()	返回被选取元素的首个地址
last()	返回被选取元素的最后一个地址
eq()	返回被选元素中带有指定索引值的元素(从零开始)
filter()	指定一个规则，符合便返回
not()	与filter()相反