masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

jQuery traversal closest() kaedah

Dengan elemen yang dipilih sebagai pusat, pencarian di dalam boleh dilakukan melalui kaedah cari dan kanak-kanak. Jika anda mencari ke atas, iaitu, untuk mencari elemen induk dan nenek moyang bagi elemen semasa, jQuery menyediakan kaedah yang paling hampir () Kaedah ini serupa dengan ibu bapa tetapi mempunyai beberapa perbezaan yang sangat halus

kaedah terdekat( ) menerima rentetan pemilih yang sepadan dengan elemen

bermula daripada elemen itu sendiri, memadankan sehingga elemen atas dalam pepohon DOM dan mengembalikan elemen nenek moyang pertama yang dipadankan

Contohnya: dalam Dalam elemen div, cari ke atas untuk semua elemen li, yang boleh dinyatakan seperti ini:

$("div").closet("li')

Nota: jQuery ialah objek koleksi , jadi koleksi atau elemen jQuery yang diberikan oleh kaedah terdekat() digunakan untuk menapis elemen

juga kerana jQuery ialah objek koleksi, mungkin objek koleksi ini perlu ditapis untuk mencari elemen sasaran, jadi ia dibenarkan untuk melepasi objek jQuery

Nota: Anda perlu memberi perhatian khusus apabila menggunakannya ) dan .closest() adalah agak serupa. Kedua-duanya melintasi elemen nenek moyang ke atas , tetapi masih terdapat perbezaan antara kedua-duanya, jika tidak, tiada makna kewujudan

Kedudukan permulaan adalah berbeza: permulaan terdekat dari elemen semasa Sasaran traversal ibu bapa bermula dari elemen induk adalah berbeza:

paling hampir Untuk mencari sasaran yang ditentukan, ibu bapa merentasi ke elemen akar dokumen, mencari yang paling hampir ke atas dan berhenti mencari sehingga ia menemui padanannya elemen ke koleksi

Hasilnya berbeza: paling hampir mengembalikan objek jquery yang mengandungi sifar atau satu elemen, dan ibu bapa mengembalikan objek jquery yang mengandungi sifar atau satu atau lebih elemen

Mari kita lihat sekeping kod

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left {
        width: auto;
        height: 200px;
    }
    
    .left div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    span {
        color: blue;
    }
    </style>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
    <h2>closest方法()</h2>
    <div class="left first-div">
    <div class="div">
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </div>
    </div>
    <br/>
    <button>点击：closest传递选择器 </button>
    <button>点击：closest传递一个元素对象</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('li.item-1').closest('.level-2').css('border', '1px solid red');
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        var itemB = $('.item-b')
        $('li.item-1')
            .closest(itemB)
            .css('border', '1px solid blue');
    })
    </script>
</body>

</html>

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 200px; } .left div { width: 350px; height: 150px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } span { color: blue; } </style> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <h2>closest方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </div> </div> <br/> <button>点击：closest传递选择器 </button> <button>点击：closest传递一个元素对象</button> <script type="text/javascript"> $("button:first").click(function() { $('li.item-1').closest('.level-2').css('border', '1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { var itemB = $('.item-b') $('li.item-1') .closest(itemB) .css('border', '1px 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)  492462 permainan