jQuery遍历DOM元素

寻梦人12138

已于 2024-03-18 11:02:45 修改

阅读量919

点赞数 24

分类专栏：前端文章标签： jquery 前端 javascript

于 2024-03-18 11:02:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44212870/article/details/136803251

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用jQuery在DOM树中进行自上而下的子元素获取（children()和find()）、自下而上的父元素和祖先元素查找（parent()、parents()和parentsUntil()），以及水平遍历（siblings()和next系列方法）和节点过滤（first(),last(),eq(),filter(),not()）的操作示例。

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

自下而上(获取父节点)

通过jQuery对象可以向上遍历DOM树

parent()返回被选元素的直接父元素。该方法只会向上一级对DOM 树进行遍历。返回要给jQuery对象
parents([type])

- 返回被选元素的祖先元素
- 可传入字符串过滤类型，返回被选元素中为该类型的祖先元素

parentsUntil("type") 返回介于两个给定元素之间的所有祖先元素

<body>
    <div id="myDiv2">myDiv.parents
        <div>myDiv.parent
            <div id="myDiv">myDiv</div>
        </div>
    </div>
    <button id="btn">返回myDiv元素</button>
    <button id="btn2">返回myDiv元素父节点</button>
    <button id="btn3">返回myDiv元素祖先节点</button>
    <button id="btn4">返回myDiv元素div祖先节点</button>
    <button id="btn5">返回myDiv与myDiv2元素中间的节点</button>
</body>
<script type="text/javascript">
    $(
        function(){
            $("#btn").click(function(){
                console.log($("#myDiv").text())
            })
            $("#btn2").click(function(){
                console.log($("#myDiv").parent().text())
            })
            $("#btn3").click(function(){
                console.log($("#myDiv").parents().text())//返回html节点内容
            })
            $("#btn4").click(function(){
                console.log($("#myDiv").parents("div").text())//返回html节点内容
            })
            $("#btn5").click(function(){
                console.log($("#myDiv").parentsUntil("#myDiv2").text())//
            })
            
        }
    )
</script>

自上而下（获取子/后代节点）

children() 返回被选元素的所有直接子元素

- 可传入字符串过滤类型，返回被选元素中为该类型的子元素

find() 返回被选元素的后代元素，一路线下直到最后一个后代

- 可传入字符串过滤类型，返回被选元素中为该类型的后代元素

<body>
    <div id="myDiv">myDiv.parents
        <div>myDiv.parent
            <div>myDiv</div>
        </div>
    </div>
    <button id="btn">返回myDiv元素的子元素</button>
    <button id="btn2">返回myDiv元素的后代元素</button>
</body>
<script type="text/javascript">
    $(
        function(){
            $("#btn").click(function(){
                console.log($("#myDiv").children().text())
            })
            $("#btn2").click(function(){
                console.log($("#myDiv").find("div").text())
            })
        }
    )
</script>