jquery jelas adik beradik div

Apabila aplikasi web terus menjadi lebih kompleks, rangka kerja JavaScript menjadi semakin penting. Salah satu rangka kerja yang paling popular ialah jQuery, perpustakaan JavaScript popular yang memudahkan untuk bekerja dengan elemen dokumen, mengendalikan acara dan mencipta kesan khas. Dalam siaran ini, kita akan belajar cara mengosongkan DIV saudara menggunakan jQuery.

1. Apakah itu jQuery?

jQuery ialah perpustakaan JavaScript yang pantas dan ringkas yang menyediakan kaedah mudah dan pantas untuk melintasi dan mengendalikan dokumen HTML, pemprosesan acara, kesan animasi, interaksi data, dsb. Ia adalah perpustakaan kod JavaScript penyemak imbas yang sangat baik. Jika perlu, ia boleh memanggil perpustakaan JavaScript sedia ada untuk menjadikan kod JavaScript anda sendiri lebih kaya.

2. Cara mengosongkan DIV pada tahap yang sama dengan jQuery

Mengosongkan DIV pada tahap yang sama bermakna mencari elemen lain (DIV) pada tahap yang sama dalam DOM dan memadamkannya. Ini adalah keperluan biasa dan boleh dicapai dengan mudah menggunakan jQuery.

Kod HTML berikut menunjukkan contoh dengan berbilang DIV:

<div class="demo-container">
    <div class="demo">Demo One</div>
    <div class="demo">Demo Two</div>
    <div class="demo">Demo Three</div>
    <div class="demo">Demo Four</div>
    <div class="demo">Demo Five</div>
</div>

Kami mahu memadamkan semua DIV kecuali yang pertama.

1. Gunakan kaedah adik beradik()

kaedah adik beradik () jQuery mengembalikan semua elemen adik beradik pada tahap yang sama dengan elemen yang dipilih. Dalam kaedah ini, anda boleh menggunakan pemilih untuk menentukan elemen yang ingin anda alih keluar, seperti yang ditunjukkan di bawah:

$(document).ready(function(){
      $('.demo').siblings().remove();
});

Dalam contoh di atas, kami memilih elemen dengan demo kelas dan kemudian menggunakan kaedah siblings() untuk memilih semua elemen yang bersebelahan dengannya. Kemudian, gunakan kaedah remove() untuk mengalih keluar elemen ini.

2. Gunakan kaedah nextAll()

kaedah nextAll() jQuery mengembalikan semua elemen pada tahap yang sama dengan elemen seterusnya yang dipilih. Dalam kaedah ini, anda juga boleh menggunakan pemilih untuk menentukan elemen yang ingin anda padamkan, seperti yang ditunjukkan di bawah:

$(document).ready(function(){
     $('.demo').nextAll().remove();
});

Dalam contoh di atas, kami memilih elemen dengan demo kelas dan kemudian menggunakan kaedah nextAll( ) untuk pilih semua elemen yang mengikutinya. Kemudian, gunakan kaedah remove() untuk mengalih keluar elemen ini.

3. Gunakan kaedah nextUntil()

kaedah nextUntil() jQuery mengembalikan semua elemen antara elemen yang dipilih dan elemen yang ditentukan. Dalam kaedah ini, anda boleh menggunakan pemilih untuk menentukan elemen yang ingin anda padamkan, seperti yang ditunjukkan di bawah:

$(document).ready(function(){
   $('.demo:first').nextUntil().remove();
});

Dalam contoh di atas, kami memilih elemen pertama dengan demo kelas dan kemudian menggunakan kaedah The nextUntil() memilih semua elemen antara elemen ini dan semua elemen berikut. Kemudian, gunakan kaedah remove() untuk mengalih keluar elemen ini.

Tiga kaedah di atas semuanya boleh mencapai fungsi mengosongkan DIV pada tahap yang sama Anda boleh memilih salah satu daripadanya mengikut keperluan anda.

3. Kesimpulan

Dalam artikel ini, kami telah mempelajari cara menggunakan jQuery untuk mengosongkan DIV pada tahap yang sama. jQuery ialah rangka kerja JavaScript yang popular dan praktikal yang menyediakan cara mudah dan pantas untuk memanipulasi elemen dokumen, mengendalikan acara dan mencipta kesan khas.

Mengosongkan DIV adik-beradik adalah salah satu keperluan biasa dan boleh dicapai dengan mudah menggunakan jQuery. Dalam artikel ini, kami memperkenalkan tiga kaedah: kaedah adik beradik(), kaedah nextAll() dan kaedah nextUntil(). Kaedah ini semuanya boleh digunakan untuk mengosongkan DIV pada tahap yang sama.

jQuery menyediakan pembangun bahagian hadapan dengan alat yang berkuasa untuk meningkatkan aliran kerja mereka. Projek sumber terbuka ini membolehkan anda membangunkan web dengan cepat dan menjadikan interaksi lebih fleksibel dan lebih mudah untuk diurus. Harap artikel ini dapat membantu anda.

Atas ialah kandungan terperinci jquery jelas adik beradik div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!