jQuery- 遍历-祖先

简介: jQuery- 遍历-祖先

直接看图:

20210908101426903.png

遍历-祖先

parent():返回被选元素的父级

parents():返回被选元素的所有祖先元素

parentsUntil():返回介于两个给定元素之间的所有元素

祖先 =  父亲、祖父、曾祖父

这些方法用于向上遍历DOM

parent():以p元素为中心,向上取父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery祖先</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        body {
            color: #fff;
        }
        .container * {
            display: block;
            border:  1px solid black;
            color: white;
            padding: 5px;
            margin: 15px;
        }
        .container div{
            background-color: #333;
        }
        ul{
            background-color: #555;
        }
        ul li {
            background-color: #777;
        }
        p{
            background-color: #999;
        }
    </style>
</head>
<body>
    <div class="container" style="width: 300px;">
        <div>div曾祖父元素
            <ul>ul祖父元素
                <li>li父元素
                    <p>p孩子</p>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(function () {
            $('p').parent().css({    //使用parent()方法获取p元素的父级
                'border': "1px solid red",
                'color': "red",
                'background-color':'white'
            })
        })
    </script>
</body>
</html>

20210908104629541.png

parents():返回p元素以外的所有的祖先元素

 $(function () {
            $('p').parents().css({    //使用parents()方法获取p元素的所有祖先
                'border': "1px solid red",
                'color': "red",
                'background-color':'white'
            })
        })

20210908105159676.png

parentsUntil() 方法

获取两个给定元素的之间的祖先元素

例如:获取div元素到p元素之间的所有祖先元素

$(function () {
            $('p').parentsUntil('div').css({    //使用parentsUntil()方法获取两者之间的祖先元素
                'border': "1px solid red",
                'color': "red",
                'background-color':'white'
            })
        })

 20210908105656929.png


相关文章
|
6月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
|
2月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
32 5
|
2月前
|
JavaScript
jQuery 遍历
jQuery 遍历
28 2
jQuery 遍历
|
2月前
|
JavaScript
jQuery 遍历
jQuery 遍历
32 1
jQuery 遍历
|
2月前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
23 6
|
2月前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
34 5
|
2月前
|
JavaScript
jQuery 遍历- 过滤
jQuery 遍历- 过滤
18 2
|
2月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
24 3
|
2月前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
17 4
|
2月前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
19 2