Utiliser jQuery pour voir si un div a un enfant avec une certaine classe

114

J'ai un div #popupqui est rempli dynamiquement de plusieurs paragraphes avec la classe .filled-text. J'essaie de faire en sorte que jQuery me dise s'il #popupcontient l'un de ces paragraphes.

J'ai ce code:

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

Aucune suggestion?

javascript jquery Samsquanch
la source
1
Cherchez-vous uniquement un enfant ou un descendant (enfant, petit-enfant, arrière petit-enfant, etc.). Le titre de la question dit actuellement "enfant" mais les réponses semblent parler de descendants arbitraires.
hippietrail
À l'époque, je crois que je cherchais spécifiquement un enfant, mais c'est difficile à retenir car cette question a presque 4 ans. Quoi qu'il en soit, la question et la réponse couvrent à la fois les enfants et les descendants, et il y a aussi des réponses qui couvrent spécifiquement les enfants et non les descendants, donc je ne suis pas sûr de ce que vous essayez d'en venir.
Samsquanch
Oh, c'est juste que lorsque vous utilisez un moteur de recherche pour rechercher une question spécifiquement sur la recherche d'un élément avec un enfant correspondant à un sélecteur, c'est celui qu'il trouve.J'aurais donc modifié le titre de la question s'il était inexact pour aider d'autres personnes à trouver la bonne question à l'avenir.
hippietrail

Réponses:

197

Vous pouvez utiliser la fonction de recherche :

if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff
Tejs
la source
7
Cela a fonctionné comme j'en avais besoin, mais pour référence if($('#popup').has('p.filled-text').length != 0) {fonctionne également.
Samsquanch
9
Pas besoin de vérifier 0. 0 est un faux dans js. developer.mozilla.org/en-US/docs/Glossary/Falsy
РАВИ
37

Il existe une fonction hasClass

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

Utilisez la fonction enfants de jQuery.

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

$.children('').length renverra le nombre d'éléments enfants qui correspondent au sélecteur.

Christopher Ramírez
la source
1
.size()renvoie la même chose que la .lengthpropriété mais est plus lente, vous devez donc la remplacer.
Johannes Klauß
Merci Johnnes de me l'avoir signalé! Je ne le savais pas. Answare mis à jour!
Christopher Ramírez
De rien, mais il y a toujours une erreur. Ce n'est .lengthpas.length()
Johannes Klauß
: PI pensait que c'était une fonction comme la plupart des interfaces jQuery. Une sorte d'incohérence je pense. Mais bon, answare mis à jour une fois de plus: P Merci Johannes.
Christopher Ramírez
La .lengthpropriété ne fait pas partie de la bibliothèque jQuery, c'est juste du javascript natif. Mais oui, cela peut parfois être déroutant.
Johannes Klauß
4

Manière simple

if ($('#text-field > p.filled-text').length != 0)
Hitesh Modha
la source
2
La méthode .size () est fonctionnellement équivalente à la propriété .length; cependant, la propriété .length est préférée car elle n'a pas la surcharge d'un appel de fonction.
Hitesh Modha
1

S'il s'agit d'un enfant direct, vous pouvez faire comme ci-dessous s'il peut être imbriqué plus profondément, supprimez le>

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