25.12.2024

jQuery: Selecionando o Pai Anterior Mais Próximo por Classe

Resposta Rápida

Para encontrar o elemento anterior mais próximo com uma classe específica usando jQuery, utilize o método .prevAll('.suaClasse').first(). Use a seguinte sintaxe:

var elementoMaisProximo = $('#elemento').prevAll('.classeDesejada').first();

Substitua '#elemento' pelo ID do elemento de seu interesse e '.classeDesejada' pela classe que você está procurando. Este código ajudará você a localizar rapidamente o elemento desejado.

Desempenho e Carga de CPU

O desempenho do seu script está diretamente relacionado ao número de elementos DOM que ele precisa processar. Usar .prevAll('.suaClasse').first() pode colocar uma carga significativa na CPU se você precisar iterar sobre muitos elementos. Isso acontece porque prevAll() examina todos os elementos anteriores em relação ao selecionado.

Para um melhor desempenho em listas grandes, é recomendado usar uma combinação de prevUntil() e last(). Essa abordagem interrompe a travessia assim que encontra o seletor desejado, e last() retorna o primeiro elemento encontrado com a classe .suaClasse:

var elementoMaisProximo = $('#elemento').prevUntil(':not(.suaClasse)').last();

Esse método é mais eficiente e coloca menos pressão no processador.

Tratamento de Classes Dinâmicas

Código moderno deve ser adaptável, assim como seu ambiente. Ao lidar com classes que mudam, faz sentido construir dinamicamente a string do seletor:

var nomeDaClasse = 'classeDinamica';
var elementoMaisProximo = $('#elemento').prevAll('.' + nomeDaClasse).first();

Essa abordagem permite que você use o código em situações com nomes de classe variáveis.

Tratamento de Situações em Tempo Real

Erros podem surgir inesperadamente, e a melhor estratégia é antecipar sua ocorrência. Verifique se o elemento procurado foi realmente encontrado:

if (elementoMaisProximo.length) {
    // Elemento encontrado
} else {
    // Elemento não encontrado
}

Essas verificações tornam o código robusto contra situações imprevistas. Considere isso como um bônus adicional.

Visualização

Aqui estão os passos que o código segue:

1. Sair do elemento atual.
2. Fazer uma travessia reversa, verificando os elementos anteriores.
3. Parar ao encontrar a classe desejada.

prevAll() junto com first() funciona da seguinte maneira:

$('.elemento-atual').prevAll('.classe-alvo').first();

Ilustração do processo:

Vizinhos anteriores: [🔲, 🔲, 🟩, 🔲, 🟩(classe='classe-alvo'), 🔲, 🔲]
Correspondência mais próxima: 🟩✔️ ('🟩', mais próximo de '📍' à direita)

E aí está! Você alcançou seu objetivo! 😎

Desmistificando Mitos: prevAll vs prev

Quando você precisa checar apenas um predcessor direto, use prev():

var elementoMaisProximoDireto = $('#elemento').prev('.suaClasse');

Esse método foca exclusivamente no elemento imediatamente anterior.

Recursos Úteis

1. .prev() | Documentação da API jQuery — Explore o método para encontrar elementos precedentes.
2. .closest() | Documentação da API jQuery — Entenda as diferenças entre os métodos closest() e prev().
3. Seletores jQuery — Familiarize-se com a aplicação de seletores jQuery.
4. .prevUntil() | Documentação da API jQuery — Informações adicionais sobre o método para encontrar elementos anteriores.
5. Travessia do DOM | Centro de Aprendizado jQuery — Mergulhe no trabalho com o DOM.
6. Propriedade do Elemento: classList - Web API | MDN — Recomendamos dominar JavaScript para trabalhar com classes.

Video

Navigation