Gunakan jQuery ' s $ .closest () vs $ .parents ()

JQuery's .closest() vs .parents(): Perbandingan terperinci

memilih antara kaedah JQuery's .closest() dan .parents() sering bergantung pada memahami perbezaan utama mereka. Artikel ini menjelaskan fungsi mereka dan memberikan contoh praktikal.

kaedah titik permulaan Arah carian nilai pulangan

Method	Starting Point	Search Direction	Return Value
.closest()	Current element	Up the DOM tree	Zero or one element
.parents()	Parent element	Up the DOM tree	Zero or more elements (in reverse order)

elemen semasa naik pokok dom sifar atau satu elemen elemen induk naik pokok dom sifar atau lebih elemen (dalam urutan terbalik)

Perbezaan teras terletak pada titik permulaan mereka. .closest() memulakan pencariannya dengan elemen semasa, manakala .parents() bermula dengan ibu bapa segera. Kedua -duanya melintasi ke atas melalui pokok Dom, tetapi .closest() berhenti pada nenek moyang yang sepadan pertama, sedangkan .parents() terus ke akar, mengumpul semua nenek moyang yang sepadan.

Perwakilan visual:

Contoh Menggunakan : .parents()

Kod ini membuang elemen ibu bapa

butang yang diklik: <li>

$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).parents('li').first().remove();
});

Nota Kaedah

diperlukan kerana .first() boleh mengembalikan pelbagai elemen. .parents()

Contoh Menggunakan : .closest()

Ini mencapai hasil yang sama dengan lebih cekap:

$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).closest('li').remove();
});

secara langsung mengembalikan nenek moyang yang sepadan pertama, menghapuskan keperluan untuk .closest(). Ini sering membawa kepada prestasi yang lebih baik, seperti yang ditunjukkan dalam pelbagai tanda aras. .first()

Soalan Lazim (Soalan Lazim):

<li>

Perbezaan utama: carian dari elemen semasa, berhenti pada perlawanan pertama; .closest() carian dari ibu bapa, mengembalikan semua perlawanan. .parents()

<li>

pelbagai elemen dikembalikan: kembali paling banyak; .closest() boleh kembali berbilang. .parents()

<li>

menggunakan tanpa pemilih: tanpa pemilih mengembalikan ibu bapa segera. .closest()

<li>

Mencari nenek moyang tertentu: kedua -dua kaedah menerima pemilih untuk menargetkan elemen nenek moyang tertentu.

<li>

tiada perlawanan: kedua -duanya mengembalikan objek jQuery kosong jika tiada perlawanan dijumpai.

<li>

sensitiviti kes: pemilih adalah sensitif kes.

<li>

chaining: kedua -dua kaedah membenarkan berantai dengan kaedah jQuery lain.

Secara ringkasnya, untuk mencari nenek moyang terdekat yang sepadan dengan pemilih tertentu,

biasanya lebih disukai untuk kecekapan dan sintaks bersih. .closest() berguna apabila anda perlu bekerja dengan semua elemen nenek moyang yang sepadan. Pilih kaedah yang paling sesuai dengan keperluan khusus dan gaya pengekodan anda. .parents()

Atas ialah kandungan terperinci Gunakan jQuery ' s $ .closest () vs $ .parents (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!