Usando jQuery para ver si un div tiene un hijo con una determinada clase

114

Tengo un div #popupque se llena dinámicamente con varios párrafos con la clase .filled-text. Estoy tratando de que jQuery me diga si #popuptiene uno de estos párrafos.

Tengo este codigo:

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

¿Alguna sugerencia?

javascript jquery Samsquanch
fuente
1
¿Está buscando solo un hijo o cualquier descendiente (hijo, nieto, bisnieto, etc)? El título de la pregunta actualmente dice "niño", pero las respuestas parecen hablar de descendientes arbitrarios.
hippietrail
En ese momento, creo que estaba buscando específicamente un niño, pero es difícil recordarlo con certeza ya que esta pregunta tiene casi 4 años. De cualquier manera, la pregunta y la respuesta cubren tanto a los hijos como a los descendientes, y también hay respuestas que cubren específicamente a los hijos y no a los descendientes, así que no estoy seguro de a qué estás tratando de llegar.
Samsquanch
Oh, es solo que cuando se usa un motor de búsqueda para buscar una pregunta específicamente sobre la búsqueda de un elemento con un niño que coincide con un selector, este es el que encuentra, por lo que habría modificado el título de la pregunta si fuera inexacto para ayudar a otras personas a encontrar la pregunta correcta en el futuro.
hippietrail

Respuestas:

196

Puede utilizar la función de búsqueda :

if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff
Tejs
fuente
7
Esto realmente funcionó como lo necesitaba, pero como referencia if($('#popup').has('p.filled-text').length != 0) {también funciona.
Samsquanch
9
No es necesario verificar 0. 0 es una falta en js. developer.mozilla.org/en-US/docs/Glossary/Falsy
РАВИ
37

Hay una función hasClass

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

Utilice la función de niños de jQuery.

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

$.children('').length devolverá el recuento de elementos secundarios que coinciden con el selector.

Christopher Ramírez
fuente
1
.size()devuelve lo mismo que la .lengthpropiedad pero es más lento, por lo que debe reemplazarlo.
Johannes Klauß
¡Gracias Johnnes por señalarme eso! Yo no lo sabia. Answare actualizado!
Christopher Ramírez
De nada, pero todavía hay un error. Es .lengthno.length()
Johannes Klauß
: PI pensó que era una función como la mayoría de las interfaces jQuery. Una especie de inconsistencia, creo. Pero bueno, answare actualizado una vez más: P Gracias Johannes.
Christopher Ramírez
La .lengthpropiedad no es parte de la biblioteca jQuery, es solo javascript nativo. Pero sí, a veces puede resultar confuso.
Johannes Klauß
4

Manera simple

if ($('#text-field > p.filled-text').length != 0)
Hitesh Modha
fuente
2
El método .size () es funcionalmente equivalente a la propiedad .length; sin embargo, se prefiere la propiedad .length porque no tiene la sobrecarga de una llamada de función.
Hitesh Modha
1

Si es un hijo directo, puede hacer lo siguiente si se pudiera anidar más profundamente, elimine el>

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