Выбор HTML-элементов по атрибуту data в jQuery

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

Для выбора элементов по их data-атрибуту в jQuery используйте следующий синтаксис:

$('[data-attribute="value"]') // "Здравствуй, элемент! Ты отобран!"

Этот код отбирает все элементы, у которых data-attribute равен value. Готово! Теперь можно расслабиться и выпить кофе. Вы отобрали необходимые элементы!

Если же нужен более конкретный отбор, например, элемент 'a' c data-customerid="22", воспользуйтесь кодом:

$('a[data-customerid="22"]') // "Торт – это ложь, но не для data attribute!"

Такой способ отбора позволит вам подготовить элемент для дальнейших действий с использованием jQuery. Например, можно добавить класс:

$('a[data-customerid="22"]').addClass('highlight'); // "Покажи всем свою яркость, .highlight!"

Легко и эффективно, согласны?

Создание эффективных и совместимых селекторов

Использование строгого соответствия значений

Следующий приём поможет избежать случайного выбора элементов по частичному совпадению. Используйте строгое соответствие значений в data-атрибутах:

$('[data-some="specificValue"]') // "Этот атрибут уходит на рекорд 11"

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

Важность кавычек

Для совместимости необходимо заключать значение атрибутов в кавычки:

$('[data-example="42"]') // "42 – жизнь, Вселенная и всё прочее это значение data-атрибута!"

Универсальный метод

Эта техника подходит для любого элемента HTML с data-атрибутом:

$('div[data-status="active"]') // Обратите внимание на "active" divs в богатом разнообразии HTML-экосистемы

.data() против .attr() в jQuery

Чтение атрибутов с помощью .data()

При чтении значений data-атрибутов, весьма целесообразно использовать .data(), сохраняющий тип данных:

var exampleData = $('a').data('example'); // "Не трогай это... .data()!"

Установка атрибутов с помощью .attr()

Для задания data-атрибутов, можно использовать .attr():

$('element').attr('data-name', value); // "Бах! Новый атрибут проложил свой путь!"

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

Представьте, что мы находимся в цифровом пруду 🌊:

Цифровой пруд: [🐠, 🐟, 🌿, 🐠🎣, 🐚, 🐟]

Используем data-hook для улова определённой рыбы:

$('div[data-hook="magic-fish"]'); // "Ты не спрячешься, найду я тебя!"

И мы её поймали!

Поймано: [🐠🎣]

Вот и всё! Наш data-hook среагировал на волшебную рыбу, соответствующую нашему data-атрибуту! 🎣✨

Детальное изучение CSS-селекторов

Поиск частичных совпадений

Для того чтобы найти элементы с data-атрибутом, содержащим список, разделённый пробелами, используйте такой синтаксис:

$('[data-tags~="monday"]') // "Сделаем понедельник незабываемым"

Начало и окончание data-атрибутов

Поиск элементов, у которых data-атрибут начинается:

$('[data-filename^="report_"]') // "Ведь отчёт – это то, что хочется увидеть в первую очередь..."

Или заканчивается на:

$('[data-url$=".com"]') // "Добро пожаловать в мир .com"

Выборка без jQuery

В условиях использования native JavaScript пользуйтесь следующим форматом:

document.querySelectorAll('[data-customerID="22"]') // "Ха-ха, я могу и без jQuery! (Шутка лишь, jQuery, мы все тебя любим ❤)"

Избегаем универсального селектора

С целью предотвращения проблем с читаемостью кода не используйте универсальный селектор *. Обязательно уточняйте тег элемента:

$('*[data-role="admin"]') // Опасно! Это неправильный подход, разработчик!
$('div[data-role="admin"]') // Правильно, молодец, наслаждайся своим заслуженным угощением 🍪!

Работа с data-атрибутами в HTML

Пример объявления data-атрибутов в HTML:

<a href="#" data-customerid="22">Ссылка</a> // ПРИГЛАШЕНИЕ... ПРИНЯТО

Пропуск кавычек

Пропускайте кавычки только в том случае, когда значение data-атрибута не содержит специальных символов:

$('[data-some=value]') // "Живу на грани... тонкостей селекторов"

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

1. Attribute Contains Selector | jQuery API Documentation – Официальная документация по селекторам jQuery.
2. Using data attributes | MDN – Обзор использования HTML, JavaScript и data-атрибутов от Mozilla Developer Network.
3. jQuery Selectors | W3Schools – Изучение на интерактивных примерах от W3Schools!
4. Complete Guide to Data Attributes | CSS-Tricks – Поскольку знание – сила!
5. How to find an element based on a data-attribute value?| Stack Overflow – FAQ на Stack Overflow всегда придёт вам на помощь!
6. Use HTML5 Data Attributes | SitePoint – Узнайте, почему HTML5 и data-атрибуты – это отличное сочетание.
7. jQuery – Selectors | TutorialsPoint – Расширьте свои знания благодаря урокам от TutorialsPoint!