28.03.2025

Obtendo a Lista de Classes de Elementos com jQuery: Exemplos e Métodos

Resposta Rápida

Você pode obter a lista de classes atribuídas a um elemento usando o método .attr('class') no jQuery. Este método retorna uma string que inclui todas as classes do elemento.

var classes = $('.element').attr('class');
console.log(classes); // "class1 class2 class3"

Você pode trabalhar com essa string diretamente ou convertê-la em um array usando .split(/\\s+/) para poder interagir com cada classe individualmente.

var listaDeClasses = $('.element').attr('class').split(/\\s+/);
console.log(listaDeClasses); // ["class1", "class2", "class3"] // Que sucesso! 🎉

A expressão regular \\s+ divide as classes por espaços, garantindo a separação adequada mesmo quando múltiplos espaços estão presentes.

Técnicas Avançadas: Trabalho Profundo com Classes

Acesso Direto via classList

Para expandir sua habilidade de trabalhar com classes, use a propriedade classList:

var elementoDom = $('.element')[0];
var arrayDeClasses = Array.from(elementoDom.classList);  // Trabalhando com classes sem jQuery! ✨

A propriedade classList possui métodos convenientes como .add(), .remove(), e .toggle(). Para verificar a presença de uma classe, use .contains(). Esta é uma alternativa ao .hasClass():

if (elementoDom.classList.contains('someClass')) {
    // Classe encontrada!
}

Verificação Dinâmica de Classes

Você pode obter informações sobre as classes de um elemento de forma dinâmica usando a propriedade .prop("classList"):

var listaClasseProp = $('.element').prop('classList');
if (listaClasseProp.contains('someClass')) {
    // Classe existe
}

Para suporte a navegadores antigos, utilize polyfills de classList do site MDN ou converta classList para um array assim:

var listaDeClassesArray = Array.prototype.slice.call($('.element').prop('classList', []));

Solução Personalizada: Plugins jQuery

Você pode criar um plugin jQuery personalizado para obter um array de classes únicas:

$.fn.classes = function(callback) {
    return this.each(function() {
        var listaDeClasses = $(this).attr('class') ? $(this).attr('class').split(/\\s+/) : [];
        if (callback) {
            $.each(listaDeClasses, function(index, nomeClasse) {
                callback.call(this, nomeClasse);
            });
        }
    });
};

// Exemplo de uso
$('.element').classes(function(nomeClasse) {
    console.log(nomeClasse); // Celebração para cada classe! 🎉
});

Essa abordagem permite um manuseio mais eficiente de classes de vários elementos e o processamento de acordo com critérios específicos.

Visualização

Você pode visualizar um elemento HTML como um cabideiro (🧥🎩), e as classes como chapéus (🎓👒🧢):

Elemento HTML (🧥🎩): O cabideiro se orgulha de seus chapéus.

Usar `$(element).attr('class').split(' ')` no jQuery é semelhante a:

Visão geral de cada rótulo para se familiarizar com todos os chapéus disponíveis.

Lista de classes (🎓👒🧢): ['chapéu-de-festa', 'chapéu-de-sol', 'boné'] // Estamos prontos para um desfile de moda! 📸

Agora sabemos exatamente quais chapéus estão à nossa disposição.

Listas de Classes: Solução de Problemas e Desafios Potenciais

Identificando Classes e Iniciando Ações

Dentro de loops (for ou $.each no jQuery), você pode acionar ações relacionadas a classes específicas:

$.each(listaDeClasses, function(index, item) {
  if(item === 'classe-importante') {
    // Código exclusivo para a classe importante
  }
});

Durante verificações frequentes de classe, defina uma função:

function realizarAcaoBaseadaNaClasse(elemento, nomeClasse) {
  if(elemento.classList.contains(nomeClasse)) {
    // Realizar ação para a classe especial
  }
}

realizarAcaoBaseadaNaClasse(elementoDom, 'ativa'); // A classe 'ativa' está sob os holofotes!

Possíveis Problemas e Soluções

A ausência de classes, repetições, espaços excessivos ou caracteres especiais pode interromper a lógica do programa. É recomendável realizar verificações e validações:

if (classes) {
  var classesSanitizadas = classes.replace(/[^a-zA-Z0-9\\-_\\s]+/g, '').split(/\\s+/);
  // Agora o array classesSanitizadas está impecável! ✨
}

Mudanças Temporárias nas Classes

As classes podem mudar durante interações do usuário ou enquanto scripts estão sendo executados. Para rastrear essas mudanças, use .prop("classList"):

$(element).on('click', function() {
  console.log($(this).prop('classList')); // Classes se atualizam ao clicar! 🖱️
});

Sem jQuery: classList no JavaScript

Se você está trabalhando sem jQuery, aqui está como você pode aplicar classList para trabalhar diretamente com JavaScript:

const classes = document.querySelector('.element').classList;
console.log(...classes); // Cada classe sob os holofotes! 🕺

Essa é uma solução eficaz que será útil em projetos onde o jQuery não é um componente-chave.

Video

Navigation