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

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

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

// Выбираем элементы с атрибутом 'data-role', значение которого равно 'main'
$('[data-role="main"]').action();

Чтобы выполнить отбор по части значения, например, data-info, начинающегося на user_:

// Ищем элементы с атрибутом 'data-info', значение которого начинается на 'user_'
$('[data-info^="user_"]').action();

Ключевым здесь является учёт атрибута данных, соответствующего его значению или правилу поиска.

Исключение заданных значений

Селектор :not помогает отобрать элементы, которые не содержат указанное значение:

// Исключаем элементы с атрибутом 'data-status', значение которого равно 'archived'
$(':not([data-status="archived"])').action();

Фильтрация по тексту: селектор :contains

При помощи селектора :contains можно найти элементы, в которых присутствует указанный текст:

// Выбираем все параграфы 'p', содержащие слово 'JavaScript'
$('p:contains("JavaScript")').action();

Выделение элементов по частям атрибутов

Селекторы ^=, *= и $= позволяют искать элементы, значения атрибутов которых начинаются, содержат или кончаются определенным способом:

// Ищем элементы с атрибутом 'data-type', значение которого начинается на 'image'
$('[data-type^="image"]').action();

// Ищем элементы, в атрибуте 'data-description' которых содержится слово 'free'
$('[data-description*="free"]').action();

// Ищем элементы, в атрибуте 'data-file' которых есть окончание '.jpg'
$('[data-file$=".jpg"]').action();

Увеличение производительности через кэширование

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

// Кэшируем элементы с атрибутом 'data-role', равным 'main'
var mainElements = $('[data-role="main"]');

Динамическое взаимодействие с данными через :data() из jQuery UI

Если данные атрибутов изменяются "на лету", можно использовать селектор :data() из jQuery UI:

// Устанавливаем данные с помощью .data()
$('element').data('key', 'value');

// После этого делаем выбор через :data()
$(':data(key)').action();

Обратите внимание, что для этого необходимо иметь jQuery UI версии 1.7.0 или новее.

Нет jQuery? Не беда: используем чистый JavaScript

Если по какой-то причине не удалось использовать jQuery, можно воспользоваться методом document.querySelectorAll:

// Вариант для любителей Vanilla JS
document.querySelectorAll('[data-role="main"]').forEach(function(el){
  // Осуществляем действия с каждым выбранным элементом
});

Примечательно, что нативные методы зачастую работают быстрее jQuery, особенно при наличии сложных запросов. Рекомендуется следовать принципу простоты.

Немного о производительности

Тестирование производительности в разных браузерах помогает определить наиболее эффективный подход к отбору элементов. Так, лучшие результаты по скорости показал браузер Safari по сравнению с чистым JavaScript.

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

Ваш сайт можно представить как плодородный сад 🍇🍈🍉, а селекторы jQuery действуют здесь, подобно садовнику:

Сад до jQuery: 🍇🍈🍉🍊🍋🍌🍍🍎🍏🍐🍑🍒🍓
Ищем: 🍎 с меткой 'data-ripe="yes"'

При использовании селектора jQuery вы легко найдете нужный элемент:

$('fruit[data-ripe="yes"]'); // 🎯 Найдено! Ваш 🍎 помечен как "созревший"

После выполнения всех действий в корзине останутся только нужные вам продукты:

Сад после jQuery: 🍏🍐🍑🍒🍓 (осталось богатое разнообразие фруктов!)
Корзина: 🍎 (результат в полной мере соответствует вашим требованиям!)

Селекторы jQuery максимально облегчают взаимодействие с DOM.

Дополнительные методы для взаимодействия с атрибутами данных

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

Метод .data("key", "value") в jQuery позволяет задать пользовательские атрибуты данных для элементов:

// Как кофе — основа удачного дня, так и .data() — основа успешного взаимодействия с атрибутом данных
$('element').data('key', 'value');

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

Использование filter() для отбора элементов

Метод filter() дает возможность осуществлять фильтрацию элементов в соответствии с заданными критериями:

// Производим отбор элементов по определённому критерию с помощью filter()
$('elements').filter(function() {
  return $(this).data('key') === 'specificValue';
}).action();

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

1. [Attribute Contains Selector [name*="value"] | jQuery API Documentation](https://api.jquery.com/attribute-contains-selector/) — Информация о селекторах атрибутов.
2. jQuery Selectors | W3Schools — Общий обзор jQuery селекторов.
3. Использование атрибутов данных – Изучение веб-разработки | MDN — Детальное руководство по атрибутам data-*.
4. Полное руководство по атрибутам данных | CSS-Tricks — Всестороннее исследование работы с атрибутами данных.
5. jQuery how to find an element based on a data-attribute value? – Stack Overflow — Наглядные примеры от профессионалов разработки.
6. Выбор элементов | jQuery Learning Center — Варианты выбора элементов с использованием jQuery.