Menggunakan jQuery untuk melihat apakah div memiliki anak dengan kelas tertentu

114

Saya memiliki div #popupyang secara dinamis diisi dengan beberapa paragraf dengan kelas .filled-text. Saya mencoba membuat jQuery memberi tahu saya jika #popupmemiliki salah satu paragraf ini di dalamnya.

Saya memiliki kode ini:

$("#text-field").keydown(function(event) {
    if($('#popup').has('p.filled-text')) {
        console.log("Found");
     }
});

Ada saran?

javascript jquery Samsquanch
sumber
1
Apakah Anda hanya mencari anak atau keturunan (anak, cucu, cicit, dll). Judul pertanyaan saat ini mengatakan "anak" tetapi jawabannya tampaknya berbicara tentang keturunan yang sewenang-wenang.
hippietrail
Pada saat itu saya yakin saya sedang mencari anak secara khusus, tetapi sulit untuk mengingat dengan pasti karena pertanyaan ini hampir berusia 4 tahun. Apa pun itu, pertanyaan dan jawaban mencakup anak-anak dan keturunan, dan ada juga jawaban yang secara khusus mencakup anak-anak dan bukan keturunan, jadi saya tidak yakin apa yang Anda coba sampaikan.
Samsquanch
Oh, hanya saja saat menggunakan mesin telusur untuk mencari pertanyaan khusus tentang mencari elemen dengan anak yang cocok dengan pemilih, ini adalah yang ditemukannya, jadi saya akan mengubah judul pertanyaan jika tidak akurat untuk membantu orang lain menemukan pertanyaan yang tepat di masa depan.
hippietrail

Jawaban:

197

Anda dapat menggunakan fungsi find :

if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff
Tejs
sumber
7
Ini benar-benar berfungsi seperti yang saya butuhkan, tetapi untuk referensi if($('#popup').has('p.filled-text').length != 0) {juga berfungsi.
Samsquanch
9
Tidak perlu memeriksa 0. 0 adalah falsey di js. developer.mozilla.org/en-US/docs/Glossary/Falsy
РАВИ
37

Ada fungsi hasClass

if($('#popup p').hasClass('filled-text'))
MattP
sumber
7

Gunakan anak funcion dari jQuery.

$("#text-field").keydown(function(event) {
    if($('#popup').children('p.filled-text').length > 0) {
        console.log("Found");
     }
});

$.children('').length akan mengembalikan jumlah elemen anak yang cocok dengan selektor.

Christopher Ramírez
sumber
1
.size()mengembalikan sama seperti .lengthproperti tetapi lebih lambat, jadi Anda harus menggantinya.
Johannes Klauß
Terima kasih Johnnes karena telah menunjukkan hal itu kepada saya! Saya tidak tahu itu. Answare diperbarui!
Christopher Ramírez
Sama-sama, tapi masih ada kesalahan. Ini .lengthbukan.length()
Johannes Klauß
: PI mengira itu adalah fungsi seperti kebanyakan antarmuka jQuery. Sepertinya tidak konsisten. Tapi yah, answare diperbarui sekali lagi: P Terima kasih Johannes.
Christopher Ramírez
The .lengthproperti bukan bagian dari perpustakaan jQuery, itu hanya javascript asli. Tapi ya, terkadang bisa membingungkan.
Johannes Klauß
4

Cara Sederhana

if ($('#text-field > p.filled-text').length != 0)
Hitesh Modha
sumber
2
Metode .size () secara fungsional setara dengan properti .length; Namun, properti .length lebih disukai karena tidak memiliki overhead pemanggilan fungsi.
Hitesh Modha
1

Jika itu anak langsung Anda bisa melakukan seperti di bawah ini jika bisa bersarang lebih dalam, hapus>

$("#text-field").keydown(function(event) {
    if($('#popup>p.filled-text').length !== 0) {
        console.log("Found");
     }
});
Rune FS
sumber