nenek moyang jQ...LOG MASUK

nenek moyang jQuery

jQuery Traversal - Nenek moyang


Nenek moyang ialah bapa, datuk, datuk, dll.

Dengan jQuery, anda boleh melintasi pokok DOM untuk mencari nenek moyang sesuatu elemen.


Melintasi pokok DOM

Kaedah jQuery ini berguna untuk melintasi pokok DOM:

  • ibu bapa()

  • ibu bapa()

  • ibubapaSehingga()


kaedah jQuery parent()

kaedah parent() mengembalikan elemen induk langsung bagi elemen yang dipilih.

Kaedah ini hanya akan merentasi pokok DOM satu tahap ke atas.

Contoh berikut mengembalikan elemen induk langsung bagi setiap elemen <span> >Kaedah jQuery parents()


Kaedah parents() mengembalikan semua elemen nenek moyang elemen yang dipilih, sehingga ke elemen akar dokumen (<html>).

Contoh berikut mengembalikan semua nenek moyang semua <span> elemen:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .ancestors *
        {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("span").parent().css({"color":"red","border":"2px solid red"});
        });
    </script>
</head>
<body>
<div class="ancestors">
    <div style="width:300px;">div (曾祖父元素)
        <ul>ul (祖父元素)
            <li>li (父元素)
                <span>span</span>
            </li>
        </ul>
    </div>
    <div style="width:300px;">div (祖父元素)
        <p>p (父元素)
            <span>span</span>
        </p>
    </div>
</div>
</body>
</html>
Jalankan program untuk mencubanya

Anda juga boleh menggunakan parameter pilihan untuk pasangan penapis Cari unsur nenek moyang.

Contoh berikut mengembalikan semua nenek moyang semua <span> elemen yang <ul>

kaedah jQuery parentsUntil()


kaedah parentsUntil() mengembalikan semua elemen nenek moyang antara dua elemen yang diberikan.

Contoh berikut mengembalikan semua elemen nenek moyang antara elemen <span> dan <div> 🎜>


bahagian seterusnya
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parents().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors">body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>
babperisian kursus