26.03.2025

Obtendo Nome da Classe e ID do Elemento Usando jQuery

Resposta Rápida

Se você deseja recuperar o nome da classe de um elemento com jQuery, utilize o método .attr('class'). Aqui está um exemplo de como implementá-lo:

var className = $('#elementId').attr('class');
// Suponha que temos um elemento com id="myDiv":
var className = $('#myDiv').attr('class'); // Retorna "targetClass"

Múltiplas Classes? Sem Problemas!

Se um elemento possui várias classes, você pode facilmente convertê-las de uma string para um array utilizando .attr('class').split(' '):

var allClassesArray = $('#elementId').attr('class').split(' '); // Quanto mais classes você tiver, mais interessante fica

Agora, temos um array de nomes de classes que podemos manipular conforme necessário.

Verifique Antes de Fazer Alterações

Antes de mudar qualquer classe, certifique-se de verificar sua existência no elemento utilizando o método .hasClass():

if ($('#elementId').hasClass('targetClass')) {
    // O elemento possui a classe 'targetClass', agora você pode agir.
}

Esse tipo de verificação é eficiente e evita que você tenha que analisar toda a lista de classes.

Manipulação de Eventos e Acesso às Classes

Em situações onde você está trabalhando com manipuladores de eventos do jQuery, os nomes das classes podem ser extraídos usando JavaScript puro:

$('#elementId').click(function() {
    var classNames = this.className; // Aqui estamos usando JavaScript nativo!
    var id = this.id; // E obtemos o ID do elemento
});

Nesse caso, this refere-se ao elemento DOM, permitindo interagir com suas propriedades, especificamente className e id.

Seleção Avançada de Alvos

Em casos mais complexos, podemos selecionar um div específico dentro de outro elemento usando uma combinação de seletores e filtros do jQuery:

var fifteenthDivClass = $('#sidebar div:eq(14)').attr('class'); // Obtendo a classe do décimo quinto div

Esse método permite que você obtenha a classe do décimo quinto div, considerando que a indexação do jQuery começa em zero.

Visualização

Suponha que temos um conjunto de elementos 👚, 👖, 👗, 👔, onde cada ícone representa um elemento HTML, e a classe que queremos explorar representa um estilo:

Estilos (Classes):     👚 : 'casual'
                       👖 : 'denim'
                       👗 : 'evening'
                       👔 : 'business'

Com jQuery, podemos enviar uma solicitação ao sistema para descobrir qual classe corresponde a um estilo específico:

$('.evening').attr('class');
// E o sistema responde: "Esse estilo é 'evening'"

Usando JavaScript Moderno para Acessar Classe e ID

Se você prefere usar os recursos mais recentes do JavaScript sem jQuery, veja como você pode obter os mesmos resultados:

const element = document.querySelector('#elementId');
const classNames = element.className; // Limpo e simples!
const id = element.id; // E preciso até o último momento

Para obter uma lista de todas as classes:

const classListArray = Array.from(element.classList); // E tudo está em suas mãos!

Essas propriedades nativas do DOM são suportadas pela maioria dos navegadores e oferecem uma ótima alternativa para gerenciar elementos DOM sem jQuery.

Obtendo Dados de Classe Atualizados (Dinâmicos)

Em situações onde as classes mudam dinamicamente, é crucial obter informações novas sobre elas. Sempre solicite dados sobre as classes no manipulador de eventos ou método:

$('#elementId').click(function() {
    var classNames = this.className; // Dessa forma, a informação será precisa e atual.
});

Criando Seletores jQuery a partir de Classes

Aqui aprendemos a transformar as classes de elementos em um seletor jQuery:

const selector = '.' + $('#myDiv').attr('class').split(' ').join('.'); // Transformando classes em um seletor mágico!

Usando esse código, você combina todas as classes com um ponto, simplificando a busca por elementos com o mesmo conjunto de classes.

Trabalhando com a Função .attr() Além das Classes

A função .attr() é uma ferramenta versátil que permite trabalhar com quaisquer atributos:

var typeAttr = $('#myInput').attr('type'); // Agora tudo gira em torno de mim e meus atributos! ;-)

As capacidades de .attr() não se limitam apenas a classes — essa função é essencial para acessar atributos no jQuery.

Recursos Úteis

1. .attr() | Documentação da API jQuery — uma explicação detalhada do método .attr().
2. .prop() | Documentação da API jQuery — descrição do método .prop(), que pode ser útil ao trabalhar com propriedades.
3. “Perguntas Recentes 'jquery+get+class' - Stack Overflow” — perguntas e respostas sobre como recuperar classes usando jQuery.
4. Elemento: Propriedade className - Web API | MDN — documentação oficial para className.
5. Elemento: Propriedade classList - Web API | MDN — documentação oficial para classList.
6. Aprenda jQuery | Codecademy — curso da Codecademy para ajudar você a mergulhar mais fundo no aprendizado de jQuery e no trabalho com elementos HTML.

Video

Navigation