Получение текста из span в jQuery: использование $(this).text()

Быстрый ответ

Для взятия текста из элемента <span> следует использовать метод $(this).text(), а не $(this).val(). Вот пример кода:

var spanText = $(this).text(); // Сохраняем текст элемента span в переменную

Помните об особенностях выбора узлов <span>:

$(".mySpan").text(); // Отлично! Извлечет текст из элемента с классом "mySpan"

Берегитесь ошибок:
Для динамически создаваемых элементов <span> важно использовать делегирование событий:

$(document).on('click', '.dynamic-span', function () {
    let spanText = $(this).text();
    alert(spanText); // Покажет текст элемента span во всплывающем окне
});

Все об извлечении текста

В чем различие между .text() и .val()

Если вы затрудняетесь с выбором между .text() и .val(), сравним эти методы:

• .text(): применяется для взятия текста из HTML-элементов, таких как <div>, <span>, и <p>.
• .val(): используется для чтения значений элементов форм, включая <input>, <select> и <textarea>.

$("#inputForm").val(); // Извлекает значение элемента input
$("#spanElement").text(); // Извлекает текст из элемента span

Подробнее об этом расскажет наш спикер на видео

Использование .html() для получения HTML-содержимого

Если требуется извлечь не только текст, но и HTML-разметку из элемента <span>, воспользуйтесь методом .html():

var yourSpanHtml = $("#coolSpan").html(); // Получает содержимое элемента span, включая HTML-разметку

Переход к обработке событий

В версиях jQuery 1.7 и выше метод .live() считается устаревшим, поэтому для назначения обработчиков событий используйте .on(), особенно при работе с динамическими элементами.

$("body").on('click', '#dynamicSpan', function() {
    // Здесь можно применить любую реализацию
});

Уголок отладки

Решение проблем с .text()

Если метод .text() вызывает проблемы, проверьте правильность селекторов или обратитесь к нативному JavaScript:

var spanTextFallback = $(this).parent().find('span')[0].innerText; // Альтернативное решение

Целостность HTML

Даже несущественная ошибка в HTML-разметке может привести к ошибкам при использовании селекторов jQuery. Чёткое и аккуратное поддержание структуры DOM имеет большое значение.

Профессиональные советы

Работа со span, созданными плагинами

Даже если <span> создан с помощью какого-либо плагина, например jQuery UI datepicker, не стоит беспокоиться, это всё равно обычный span:

$(document).on('click', '.ui-datepicker-month', function () {
    console.log($(this).text()); // Показывает название месяца.
});

Совет по обработке событий

Для улучшения производительности и работы с динамически добавляемыми элементами рекомендуется привязывать обработчики событий к родительскому элементу, который точно есть при загрузке страницы:

$("body").on('click', '.childSpan', function() {
    // Эффективное взаимодействие с динамическим потомком
});

Визуализация

Понятно и ясно о том, что метод $(this).val() не подходит для чтения текста из элемента <span>:

// Метод jQuery $(this).val() — это как почтовый ящик📬 для писем💌 (читает значение из input)
$("input").val(); // Читает значение

// `<span>` — это как рекламный щит🚧, показывающий сообщение, но не хранящий письма💌
$("span").text(); // Читает информацию с щита🚧 (текст)

Главная мысль

$(this).val(): 📬✉️ // Применяется для input, textarea и подобных
$("span").text(): 🚧👀 // Идеально подходит для отображения текста на 'рекламных щитах' DOM

Полезные материалы

1. .val() | jQuery API Documentation — Подробное руководство по методу .val().
2. jQuery Selectors — Повторите правила выбора элементов в jQuery.
3. .text() | jQuery API Documentation — Прочитайте о работе метода .text() с текстом.
4. jQuery API Documentation — Изучите все возможности jQuery.
5. Common jQuery Errors — SitePoint — Узнайте решения распространенных проблем при работе с jQuery.
6. How do I get the value of text input field using JavaScript? – Stack Overflow — Дискуссия о .val() и полях ввода на Stack Overflow.
7. JSFiddle – Code Playground — Экспериментируйте с .val() и .text() и попробуйте создать что-то новое!