28.03.2025

Recuperando Texto de um <span> no jQuery: Usando $(this).text()

Resumo Rápido

Para obter texto de um elemento <span>, você deve usar o método $(this).text(), e não $(this).val(). Aqui está um exemplo de código:

var spanText = $(this).text(); // Armazena o texto do elemento span em uma variável

Tenha em mente os detalhes ao selecionar nós <span>:

$(".minhaSpan").text(); // Ótimo! Extrai o texto do elemento com a classe "minhaSpan"

Cuidado com Erros:
Para elementos <span> criados dinamicamente, é importante usar delegação de eventos:

$(document).on('click', '.span-dinamica', function () {
    let spanText = $(this).text();
    alert(spanText); // Exibe o texto do elemento span em uma caixa de alerta
});

Tudo Sobre Extração de Texto

Qual a Diferença Entre .text() e .val()

Se você está tendo dificuldades em escolher entre .text() e .val(), vamos comparar esses métodos:

• .text(): Usado para recuperar texto de elementos HTML como <div>, <span>, e <p>.
• .val(): Usado para ler valores de elementos de formulário, incluindo <input>, <select>, e <textarea>.

$("#formularioEntrada").val(); // Extrai o valor do elemento de entrada
$("#elementoSpan").text(); // Extrai texto do elemento span

Usando .html() para Obter Conteúdo HTML

Se você precisa extrair não apenas o texto, mas também a marcação HTML de um elemento <span>, use o método .html():

var seuSpanHtml = $("#spanLegal").html(); // Obtém o conteúdo do elemento span, incluindo a marcação HTML

Avançando para Manipulação de Eventos

Nas versões do jQuery 1.7 e posteriores, o método .live() é considerado obsoleto, então para atribuir manipuladores de eventos, use .on(), especialmente ao trabalhar com elementos dinâmicos.

$("body").on('click', '#spanDinamico', function() {
    // Aqui você pode implementar qualquer lógica
});

Dicas de Depuração

Solucionando Problemas com .text()

Se o método .text() estiver causando problemas, verifique os seletores ou recorra ao JavaScript nativo:

var spanTextFallback = $(this).parent().find('span')[0].innerText; // Solução alternativa

Integridade do HTML

Mesmo um pequeno erro na marcação HTML pode levar a problemas ao usar seletores jQuery. Manter uma estrutura de DOM clara e organizada é vital.

Dicas Profissionais

Trabalhando com Spans Criados por Plugins

Mesmo que um <span> seja criado usando um plugin, como o datepicker do jQuery UI, não há motivo para se preocupar; ainda é um span comum:

$(document).on('click', '.ui-datepicker-month', function () {
    console.log($(this).text()); // Exibe o nome do mês.
});

Dica de Manipulação de Eventos

Para melhor desempenho e manipulação de elementos adicionados dinamicamente, é recomendado vincular manipuladores de eventos a um elemento pai que está presente quando a página carrega:

$("body").on('click', '.spanFilho', function() {
    // Interação eficaz com filhos dinâmicos
});

Visualização

Deixe claro que o método $(this).val() não é adequado para ler texto de um <span>:

// O método jQuery $(this).val() é como uma caixa de correio📬 para cartas💌 (lê valor de input)
$("input").val(); // Lê o valor

// `<span>` é como um painel🚧 exibindo uma mensagem, mas não segurando cartas💌
$("span").text(); // Lê informações do painel🚧 (texto)

== Principais Conclusões ==

$(this).val(): 📬✉️ // Usado para input, textarea e similares
$("span").text(): 🚧👀 // Perfeito para exibir texto em 'painéis' do DOM

Recursos Úteis

1. .val() | Documentação da API do jQuery — Guia abrangente sobre o método .val().
2. Seletores jQuery — Revise as regras de seleção de elementos no jQuery.
3. .text() | Documentação da API do jQuery — Aprenda como o método .text() funciona com texto.
4. Documentação da API do jQuery — Explore todas as capacidades do jQuery.
5. Erros Comuns do jQuery — SitePoint — Aprenda soluções para problemas comuns ao trabalhar com jQuery.
6. Como obtenho o valor de um campo de entrada de texto usando JavaScript? - Stack Overflow — Uma discussão sobre .val() e campos de entrada no Stack Overflow.
7. JSFiddle - Playground de Código — Experimente com .val() e .text() e tente criar algo novo!

Video

Navigation