Как получить атрибут data-id в jQuery: методы .data() и .attr()

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

Вы можете определить data-id в jQuery с использованием .attr('data-id'), чтобы извлечь его исходное значение, или же .data('id'), чтобы отследить возможные последующие изменения. Для наглядности представлен следующий пример:

// Если вам нужно статическое значение из HTML, т.е. "первоначальная задумка разработчика HTML"
var dataId = $('#element').attr('data-id');

// Если вам требуются динамические значения, которые могут быть переопределены с помощью скриптов
var dataId = $('#element').data('id');

Запомните: .attr() используется для неизменных фактов (статический контент), в то время как .data() подходит для обработки потенциальных данными изменений (динамические данные).

Погружение в суть .data() и .attr() в jQuery

В библиотеке jQuery существуют два метода для доступа к атрибутам данных – .data() и .attr(). Они могут быть слегка загадочными в своем поведении! .data('id') ссылается на значение из внутреннего хранилища jQuery, которое, возможно, не обновится, если вы используете .attr() для изменения значения data-id после загрузки страницы. .attr(), в свою очередь, прекрасно передает текущее значение атрибута из HTML-элемента, предоставляя верную информацию.

Когда требуется предсказуемое поведение (особенно в таких браузерах как Firefox), рекомендуется использовать .attr('data-id') в первую очередь. Однако, обратите внимание, что динамическое изменение данных с использованием .attr() не приводит к автоматическому обновлению внутреннего объекта данных, который контролирует jQuery. Таким образом, .data() не может отражать последующие изменения.

Альтернативный подход: Vanilla JS

Если не использовать jQuery, обычный JavaScript предлагает свои методы для работы с данными атрибутами. getAttribute('data-id') может быть использован следующим образом:

var element = document.querySelector('#element');
var dataId = element.getAttribute('data-id');

Как альтернатива, предполагая, что вы используете современные браузеры, доступно свойство .dataset:

var dataId = element.dataset.id;

Кроме того, не забывайте о пользователях, использующих IE. Помимо уважения, которое вы должны проявлять к ним, всегда проверяйте сайты, такие как caniuse.com, чтобы определить поддержку функционала и убедиться, что ваш код работает в любых условиях.

Будьте внимательны и избегайте ошибок

• В нашем кодировочном словаре после имени data- должны следовать только строчные буквы. Так что element.dataset.userid относится к data-user-id!
• Если вы хотите обновлять значения при помощи jQuery минуя настройки браузера, используйте .attr('data-id', 'newvalue') – этот метод обеспечивает совместимость в существующих браузерах.
• Функция .data() в jQuery имеет богатый функционал: ее основное применение – чтение атрибутов "data-", но она также может сохранять данные во внутреннее хранилище jQuery, не изменяя атрибуты, видимые пользователю.
• Маленький совет: не приглашайте неуместный хэш (#) в функцию .attr(). .attr("#data-id") здесь явно нарушает правила!
• Названия атрибутов данных, состоящие из нескольких слов, такие как data-my-attribute, следуют соглашению о camelCase при обращении к ним через .dataset. То есть используются в таком формате: dataset.myAttribute.

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

Расшифровка таинственного атрибута data-id:

🔍 <div data-id="123">Инспекции элемента</div>

Расшифровка кода:

let secretKey = document.querySelector('div').getAttribute('data-id');

То, как вы можете открыть свой скрытый data-id как сокрытую ценность:

🔑 (Function) Секретное хранилище (div)  →  💎 ('123')

Ваша задача, если вы к ней приступите, – определить это значение!

Динамическое обновление данных на jQuery

Работая с обновлением данных, не забудьте про важный нюанс: если вы обновляете атрибут данных через .attr(), затем, как истинный виртуоз, обновите объект данных на jQuery для поддержания синхронности:

$('#element').attr('data-id', 'newvalue').data('id', 'newvalue'); // "Если меня не обновить, путь к тебе оборвётся!"

Таким образом, последующие вызовы .data('id') предоставят вам самый последний уникальный номер.

Готовность к Будущему

Несмотря на то, что jQuery был неукротимым воином, современный JavaScript предложил API .dataset. Это позволяет сделать ваш код независимым от jQuery и соответствующим будущим стандартам кодирования. Кроме того, благодаря прямому взаимодействию с DOM в vanilla JS, ваш код будет работать быстрее.

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

1. Использование атрибутов данных – Учим веб-разработку | MDN – Подробная карта атрибутов данных в HTML.
2. Глобальные атрибуты data-* HTML – W3Schools – Пополните свои знания об атрибутах данных HTML и их практическом применении.
3. .data() | Документация jQuery API – Ваше руководство к пониманию метода .data() на jQuery для работы с атрибутами данных.
4. Полное руководство по атрибутам данных | CSS-Tricks – Объяснение секретов атрибутов данных в HTML и CSS.
5. Как и зачем использовать пользовательские атрибуты данных HTML5 — SitePoint – Изучите особенности и тонкости пользовательских атрибутов данных HTML5.
6. Метод getAttribute() DOM элемента HTML – W3Schools – Подробное руководство по получению значений атрибутов в HTML с использованием метода getAttribute().