Как найти элемент по data атрибуту js

важность: 5

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

   Choose the genre

   Choose the genre

Как выбрать элемент по data атрибуту на js?

Как выбрать элемент по data атрибуту на чистом js.
На jquery через $(); выбирает, но на js через querySelector не работает. Пишет:
Failed to execute ‘querySelector’ on ‘Document’: ‘.dropdown__content[data-content=6]’ is not a valid selector.

var data_id = this.getAttribute('data-id'); var dropdown_content_ths = document.querySelector('.dropdown__content[data-content='+data_id+']');

Вопрос задан более трёх лет назад
23030 просмотров

2 комментария

Простой 2 комментария

Использование data-* атрибутов

HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData() .

Синтаксис HTML

Синтаксис прост — любой атрибут, чьё имя начинается с data- , является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data -атрибуты:

article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> . article>

Доступ в JavaScript

Чтение data- атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset (en-US).

Чтобы получить data -атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).

var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"

Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным «5» .

Доступ в CSS

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

article::before  content: attr(data-parent); >

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

article[data-columns="3"]  width: 400px; > article[data-columns="4"]  width: 600px; >

Увидеть как это работает можно в примере на JSBin.

Data -атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.

Проблемы

Не храните данные, которые должны быть видимы и доступны в data -атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data -атрибутах.

Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset . Для поддержки IE 10 и более ранних версий получение доступа к data -атрибутам необходимо осуществлять через getAttribute() . Также, производительность чтения data- атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute() .

Тем не менее, для пользовательских метаданных, связанных с элементами, data- атрибуты являются отличным решением.

Смотрите также

This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
How to use HTML5 data attributes (Sitepoint)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Найти дочерний элемент по data-attr (jQuery)

Задача: найти по клику на ссылку в таблице элементы в блоке с классом all_tasks, у которых родительский элемент имеет атрибут data-id, равный data-id строки, в которой находилась ссылка. Понимаю, что нужно сделать вот так:

$(document).on('click', '.edit_task_link', function()< var alert(id); )>;

А что дальше делать? Как найти элемент по его атрибуту id?
Отслеживать
задан 17 июл 2017 в 18:37
Alexxosipov Alexxosipov
2,739 1 1 золотой знак 20 20 серебряных знаков 52 52 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Такой селектор должен сработать:

$('.all-tasks div[data-id=" + id + "]');

Отслеживать
ответ дан 17 июл 2017 в 18:46
KAGG Design KAGG Design
35.2k 4 4 золотых знака 24 24 серебряных знака 53 53 бронзовых знака
Вернее, так: $(‘.all-tasks div[data-id=» + id + «]’); , верно?
17 июл 2017 в 18:47
Да, точно. Не обратил внимания на дочерний div. Но идею вы поняли — квадратные скобки.
17 июл 2017 в 18:57
Поправил ответ, пусть будет тут правильный )
17 июл 2017 в 19:08

javascript
jquery

Важное на Мете

Связанные

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Как найти элемент по data атрибуту js