Usando jQuery para ver se um div tem um filho com uma determinada classe

114

Eu tenho uma div #popupque é preenchida dinamicamente com vários parágrafos com a classe .filled-text. Estou tentando fazer com que o jQuery me diga se #popupcontém um desses parágrafos.

Eu tenho este código:

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

Alguma sugestão?

javascript jquery Samsquanch
fonte
1
Procura apenas um filho ou descendente (filho, neto, bisneto, etc). O título da pergunta atualmente diz "filho", mas as respostas parecem falar sobre descendentes arbitrários.
hippietrail
Na época eu acredito que estava procurando especificamente por uma criança, mas é difícil lembrar com certeza já que essa pergunta tem quase 4 anos. De qualquer forma, a pergunta e a resposta abrangem filhos e descendentes, e também há respostas que abrangem especificamente filhos e não descendentes, então não tenho certeza do que você está tentando chegar.
Samsquanch
Oh, é só que, ao usar um mecanismo de pesquisa para procurar uma pergunta especificamente sobre a procura de um elemento com um filho correspondendo a um seletor, este é o que ele encontra, então eu teria ajustado o título da pergunta se fosse impreciso para ajudar outras pessoas a encontrar a pergunta certa no futuro.
hippietrail

Respostas:

197

Você pode usar a função find :

if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff
Tejs
fonte
7
Isso realmente funcionou como eu precisava, mas if($('#popup').has('p.filled-text').length != 0) {também funciona para referência .
Samsquanch
9
Não há necessidade de verificar 0. 0 é um falsey em js. developer.mozilla.org/en-US/docs/Glossary/Falsy
РАВИ
37

Existe uma função hasClass

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

Use a função infantil do jQuery.

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

$.children('').length retornará a contagem de elementos filhos que correspondem ao seletor.

Christopher Ramírez
fonte
1
.size()retorna o mesmo que a .lengthpropriedade, mas é mais lento, portanto, você deve substituí-lo.
Johannes Klauß
Obrigado Johnnes por me apontar isso! Eu não sabia disso. Answare atualizado!
Christopher Ramírez
De nada, mas ainda há um erro. É .lengthnão.length()
Johannes Klauß
: PI pensava que era uma função como a maioria das interfaces jQuery. Tipo de inconsistência, eu acho. Mas bem, answare atualizado mais uma vez: P Obrigado Johannes.
Christopher Ramírez
A .lengthpropriedade não faz parte da biblioteca jQuery, é apenas javascript nativo. Mas sim, às vezes pode ser confuso.
Johannes Klauß
4

Maneira simples

if ($('#text-field > p.filled-text').length != 0)
Hitesh Modha
fonte
2
O método .size () é funcionalmente equivalente à propriedade .length; no entanto, a propriedade .length é preferida porque não tem a sobrecarga de uma chamada de função.
Hitesh Modha
1

Se for um filho direto, você pode fazer como a seguir se pudesse ser aninhado mais profundamente, remova o>

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