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

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