Verwenden von jQuery, um festzustellen, ob ein Div ein Kind mit einer bestimmten Klasse hat

114

Ich habe ein Div #popup, das dynamisch mit mehreren Absätzen der Klasse gefüllt ist .filled-text. Ich versuche, jQuery dazu zu bringen, mir mitzuteilen, ob #popupeiner dieser Absätze enthalten ist.

Ich habe diesen Code:

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

Irgendwelche Vorschläge?

javascript jquery Samsquanch
quelle
1
Suchen Sie nur ein Kind oder einen Nachkommen (Kind, Enkel, Urenkel usw.) ? Der Fragentitel lautet derzeit "Kind", aber die Antworten scheinen über beliebige Nachkommen zu sprechen.
Hippietrail
Zu der Zeit, glaube ich, habe ich speziell nach einem Kind gesucht, aber es ist schwer, sich sicher zu erinnern, da diese Frage fast 4 Jahre alt ist. In beiden Fällen decken Frage und Antwort sowohl Kinder als auch Nachkommen ab, und es gibt auch Antworten, die sich speziell auf Kinder und nicht auf Nachkommen beziehen. Ich bin mir also nicht sicher, worauf Sie abzielen.
Samsquanch
Oh, es ist nur so, dass wenn ich eine Suchmaschine verwende, um nach einer Frage zu suchen, die speziell nach einem Element mit einem Kind sucht, das mit einem Selektor übereinstimmt, dieses gefunden wird. Ich hätte also den Fragentitel angepasst, wenn er ungenau wäre, um anderen Menschen bei der Suche zu helfen die richtige Frage in der Zukunft.
Hippietrail

Antworten:

196

Sie können die Suchfunktion verwenden:

if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff
Tejs
quelle
7
Dies funktionierte tatsächlich so, wie ich es brauchte, aber als Referenz if($('#popup').has('p.filled-text').length != 0) {funktioniert es auch.
Samsquanch
9
Keine Notwendigkeit, nach 0 zu suchen. 0 ist ein Falsey in js. developer.mozilla.org/en-US/docs/Glossary/Falsy
14.
37

Es gibt eine hasClass- Funktion

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

Verwenden Sie die Kinder funcion von jQuery.

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

$.children('').length gibt die Anzahl der untergeordneten Elemente zurück, die mit dem Selektor übereinstimmen.

Christopher Ramírez
quelle
1
.size()Gibt die gleiche .lengthEigenschaft wie die Eigenschaft zurück, ist jedoch langsamer. Sie sollten diese also ersetzen.
Johannes Klauß
Vielen Dank an Johnnes, dass er mich darauf hingewiesen hat! Ich wusste es nicht. Answare aktualisiert!
Christopher Ramírez
Gern geschehen, aber es liegt immer noch ein Fehler vor. Es ist .lengthnicht.length()
Johannes Klauß
: PI dachte, es sei eine Funktion wie die meisten jQuery-Schnittstellen. Art von Inkonsistenz denke ich. Aber gut, Answare noch einmal aktualisiert: P Danke Johannes.
Christopher Ramírez
Die .lengthEigenschaft ist nicht Teil der jQuery-Bibliothek, sondern nur natives Javascript. Aber ja, manchmal kann es verwirrend sein.
Johannes Klauß
4

Einfacher Weg

if ($('#text-field > p.filled-text').length != 0)
Hitesh Modha
quelle
2
Die .size () -Methode entspricht funktional der .length-Eigenschaft. Die Eigenschaft .length wird jedoch bevorzugt, da sie nicht den Overhead eines Funktionsaufrufs hat.
Hitesh Modha
1

Wenn es sich um ein direktes Kind handelt, können Sie wie folgt vorgehen, wenn es tiefer verschachtelt sein könnte. Entfernen Sie das>

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