18.04.2025

Verificando a Presença de Classe Entre os Antecessores com jQuery

Resposta Rápida

Para verificar se uma classe específica existe entre os antecessores de um elemento no jQuery, utilize o método .closest():

if ($(element).closest('.desiredClass').length) {
    // Se essa condição for atendida, a classe foi encontrada - seu código funciona!
}

Troque element pelo seu seletor jQuery e .desiredClass pela classe desejada.

O Método .parents(): Inspecionando os Vizinhos

O método .parents() é útil para buscas em massa entre todos os antecessores:

if ($(element).parents('.checkClass').length) {
    // Um par relacionado foi encontrado!
}

Nota: Este método consome mais recursos, pois verifica todos os níveis de antecessores até o elemento raiz.

A Importância da Qualidade do Código: Evite Chamadas Excessivas de .parent()

O uso excessivo de chamadas sequenciais como .parent().parent()... cria uma estrutura complicada que pode ser evitada ao usar .parents(), permitindo buscas sequenciais entre os antecessores.

Verificando a Versão do jQuery: Problemas de Compatibilidade

É importante assegurar que você está utilizando o jQuery a partir da versão 1.7.2 para o funcionamento adequado dos métodos .closest() e .parents(). Caso contrário, podem ocorrer problemas de compatibilidade.

Closest vs. parents: Escolhendo o Método Certo

O método .closest() encontra o elemento mais próximo com a classe especificada, incluindo o elemento atual. Em contraste, o método .parents() foca apenas na busca entre os antecessores.

if ($(element).parents().hasClass('checkClass')) {
    // Objetivo alcançado!
}

Lembre-se de que combinar hasClass() com parents() não dará resultado, pois .parents() retorna uma coleção de elementos jQuery.

Quer Estilizar com CSS? Tente .parentClass:has(#myElem)

Você pode definir estilos em um elemento pai com base na presença ou ausência de um elemento filho usando a propriedade CSS .parentClass:has(#myElem).

Visualização

Imagine que seu seletor jQuery é um detetive procurando por um tesouro escondido (uma classe) em um castelo (a árvore DOM).

🔍 Iniciando a busca (seu seletor jQuery)
|
🚪 Entrando em outra sala (o elemento pai)
|
🔄 Inspecionando salas (buscando entre os antecessores)
|
🕵️‍♂️ Encontrou uma sala com um cofre! (antecessor com a classe desejada)

O código se parece com isto:

if ($('.yourSelector').parents('.yourClass').length) {
    // 🎉 Classe encontrada!
} else {
    // 🕵️‍♂️ Continuando a busca...
}

Buscando Múltiplas Classes

Se você precisar verificar se um antecessor pertence a várias classes, combine-as assim:

if ($(element).closest('.classOne, .classTwo').length) {
    // Encontrou um elemento com a classe 'classOne' ou 'classTwo'
}

Recursos: Closest vs. Parents

Há uma distinção importante: se o elemento atual satisfaz o seletor, o método .closest() o inclui na seleção, ao contrário do que acontece com .parents(), que procura apenas entre os antecessores.

.parent() vs. .parents(): Entendendo a Diferença

É importante distinguir entre o método .parent(), que retorna o pai imediato, e o método .parents(), que busca através de todos os níveis de antecessores.

Não é Fã do jQuery?

Para realizar essa tarefa sem o jQuery, você pode usar o método nativo JavaScript matches():

let node = document.querySelector(element);
while (node && !node.matches('.targetClass')) {
    node = node.parentElement;
}
if (node) {
    // Nós encontramos o que estávamos procurando, e sem jQuery!
}

Se você deseja melhorar o desempenho, aprender a usar métodos nativos do JavaScript é vantajoso.

Recursos Úteis

1. .closest() | Documentação da API jQuery - Um guia detalhado sobre o método .closest() pelos autores do jQuery.
2. javascript - Obtendo um Elemento Pai por Seletor - Stack Overflow - O Stack Overflow oferece discussões úteis sobre como encontrar classes entre os antecessores.
3. .parents() | Documentação da API jQuery - A documentação jQuery explica como verificar classes de antecessores usando o método .parents().
4. Método Element: matches() - APIs da Web | MDN - Você pode encontrar informações sobre o método .matches() para comparar elementos DOM sem usar jQuery no MDN.
5. Você Pode Não Precisar do jQuery - Maneiras alternativas de usar JavaScript nativo em vez do jQuery.
6. Percorrendo a Árvore DOM | Tutorial jQuery - Materiais educacionais sobre como percorrer e manipular a árvore DOM usando jQuery.
7. .is() | Documentação da API jQuery - Informações adicionais sobre o método .is() para verificar se os elementos correspondem a seletores ou classes específicas.

Video

Navigation