Существует ли простой и прямой способ выбора элементов на основе их data
атрибута? Например, выберите все якоря с именованным атрибутом данных customerID
, значение которого равно 22
.
Я не решаюсь использовать rel
другие атрибуты для хранения такой информации, но мне гораздо сложнее выбрать элемент на основе того, какие данные в нем хранятся.
jquery
html
custom-data-attribute
Хазем Салама
источник
источник
$('*[data-customerID]')
Вы можете использовать его, например, с$('*[data-customerID]').each( function() { ... });
Ответы:
Вы должны быть в состоянии опустить
*
, но если я правильно помню, в зависимости от того, какую версию jQuery вы используете, это может дать ошибочные результаты.Обратите внимание, что для совместимости с Selectors API (
document.querySelector{,all}
), кавычки вокруг значения атрибута (22
) не могут быть опущены в этом случае .Кроме того, если вы много работаете с атрибутами данных в своих сценариях jQuery, вы можете рассмотреть возможность использования плагина пользовательских атрибутов данных HTML5 . Это позволяет вам писать еще более читабельный код с помощью
.dataAttr('foo')
и приводит к уменьшению размера файла после минимизации (по сравнению с использованием.attr('data-foo')
).источник
.data()
сопоставляется с пользовательскимиdata-*
атрибутами, что делает этот плагин избыточным. Тем не менее, он все еще может быть использован для более старых версий jQuery ».$('[data-customerID]')
.data()
), верно?Для людей, гуглящих и желающих иметь более общие правила выбора при помощи атрибутов данных:
$("[data-test]")
выберет любой элемент, который просто имеет атрибут данных (независимо от значения атрибута). Включая:$('[data-test~="foo"]')
выберет любой элемент, который содержит атрибут данных,foo
но не обязательно должен быть точным, например:$('[data-test="the_exact_value"]')
выберет любой элемент с точным значением атрибута данныхthe_exact_value
, например:но нет
источник
~=
совпадает с разделенными пробелами словами, тогда как*=
соответствует любой подстроке.^
характера?$('[data-test^=foo]')
в этом случае вы выбираете что-либо, начинающееся с foo, например,<div data-test="foo_exact_value">
или<div data-test="food">
нет<div data-test="seafoo">
Использование
$('[data-whatever="myvalue"]')
выберет что-нибудь с html-атрибутами, но в более новых jQueries кажется, что если вы используете$(...).data(...)
для прикрепления данных, он использует некоторую волшебную вещь браузера и не влияет на html, поэтому не обнаруживается,.find
как указано в предыдущем ответе .Проверьте (протестировано с 1.7.2+) (также см. Скрипту ): (обновлено, чтобы быть более полным)
источник
.filter
здесь$item.attr('data-id', 10);
Я не видел ответа JavaScript без jQuery. Надеюсь, это кому-нибудь поможет.
Информация:
атрибуты данных
.querySelectorAll ();
источник
Чтобы выбрать все привязки с атрибутом данных
data-customerID==22
, вы должны включить,a
чтобы ограничить область поиска только этим типом элемента. Поиск атрибутов данных в большом цикле или с высокой частотой, когда на странице много элементов, может вызвать проблемы с производительностью.источник
Native JS Примеры
Получить NodeList элементов
HTML:
<div data-id="container"></div>
Получить первый элемент
HTML:
<div id="container"></div>
Таргетинг на коллекцию узлов, которая возвращает список узлов
HTML:
Получить элементы на основе нескольких (ИЛИ) значений данных
HTML:
Получить элементы на основе комбинированных (И) значений данных
HTML:
Получить элементы, где значение начинается с
источник
через метод фильтра Jquery ():
http://jsfiddle.net/9n4e1agn/1/
HTML:
JavaScript:
источник
Конструкция такая:
$('[data-XXX=111]')
не работает в Safari 8.0 .Если вы установили данные объясняют это так:
$('div').data('XXX', 111)
он работает только если установить атрибут данных непосредственно в DOM так:$('div').attr('data-XXX', 111)
.Я думаю, это потому, что команда jQuery оптимизировала сборщик мусора для предотвращения утечек памяти и тяжелых операций при перестроении DOM для каждого атрибута данных изменений.
источник
Чтобы это работало в Chrome, значение не должно быть другой пары кавычек.
Это работает только, например, так:
источник
$('[data-action=setStatus]').removeClass('disabled')
Иногда желательно фильтровать элементы на основе того, имеют ли они элементы данных, присоединенные к ним программно (иначе как через атрибуты dom):
Вышеописанное работает, но не очень читабельно. Лучший подход - использовать псевдоселектор для проверки такого рода вещей:
Теперь мы можем изменить исходное утверждение на что-то более свободное и читаемое:
источник
Просто для того, чтобы завершить все ответы некоторыми функциями «жизненного стандарта» - к настоящему моменту (в эпоху html5) это можно сделать без сторонних библиотек:
document.querySelector('[data-answer="42"],[type="submit"]')
document.querySelectorAll('[data-answer="42"],[type="submit"]')
[data-answer="42"],[type="submit"]
[data-answer]
илиinput[type]
источник