masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

jQuery traversal siblings()

jQuery ialah objek koleksi Jika anda ingin mencari elemen adik beradik bagi setiap elemen dalam koleksi elemen yang ditentukan, anda boleh menggunakan kaedah adik beradik()

untuk memahami hubungan carian nod:

seperti berikut Unsur blue class="item-2" li, nod merah ialah nod saudaranya

<ul class="level-3">

<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item- 3" >3</li>

</ul>

adik-beradik() tiada parameter

Dapatkan set elemen padanan yang mengandungi setiap elemen Koleksi elemen elemen adik beradik

Nota: jQuery ialah objek koleksi, jadi adik beradik memadankan elemen adik beradik setiap elemen dalam koleksi

Kaedah adik beradik() secara selektif menerima perkara yang sama Taip ungkapan pemilih

Begitu juga, kerana jQuery ialah objek koleksi, mungkin perlu menapis objek koleksi ini untuk mencari elemen sasaran, jadi ia dibenarkan untuk melepasi ungkapan pemilih

Jom tulis contoh di bawah:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left {
            width: auto;
            height: 150px;
        }
        
        .left div {
            width: 150px;
            height: 100px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }
        
        a {
            display: block;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>siblings方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：siblingsv无参数</button>
    <button>点击：siblings传递选择器</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('.item-2').siblings().css('border', '2px solid red');
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到class=item-2的所有兄弟节点
        //然后筛选出最后一个，加上蓝色的边
       $('.item-2').siblings(':last').css('border', '2px solid blue');
    })
    </script>

</body>

</html>

Nota: adik-beradik mencari semua unsur adik-beradik, bukan unsur adik-beradik yang bersebelahan

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 150px; } .left div { width: 150px; height: 100px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } a { display: block; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>siblings方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-2"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> </div> <button>点击：siblingsv无参数</button> <button>点击：siblings传递选择器</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-2').siblings().css('border', '2px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到class=item-2的所有兄弟节点 //然后筛选出最后一个，加上蓝色的边 $('.item-2').siblings(':last').css('border', '2px solid blue'); }) </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492962 permainan