Я хотел бы знать, какие селекторы доступны для этих атрибутов данных, которые поставляются с HTML5.
Взяв этот фрагмент HTML в качестве примера:
<ul data-group="Companies">
<li data-company="Microsoft"></li>
<li data-company="Google"></li>
<li data-company ="Facebook"></li>
</ul>
Есть ли селекторы, чтобы получить:
- Все элементы с
data-company="Microsoft"
ниже"Companies"
- Все элементы с
data-company!="Microsoft"
ниже"Companies"
- В других случаях возможно использование других селекторов, таких как «содержит, меньше, больше, и т.д ...».
Ответы:
Посмотрите на JQuery Селекторы : содержит селектор
вот информация о : содержит селектор
источник
$('div[data-col="1"][data-row="2"]')
Будет ли это выбирать div, где data-col равен 1, а data-row равен 2, или он выберет любой из них?.attr('data-something', 'value')
чтобы увидеть обновление в HTML. В соответствии с stackoverflow.com/questions/6827810/…data
в вызове?$('#element').data('something')
jQuery UI
имеет:data()
селектор, который также может быть использован. Похоже, это было с версии 1.7.0 .Вы можете использовать это так:
Получить все элементы с
data-company
атрибутомПолучить все элементы, где
data-company
равныMicrosoft
Получить все элементы, где
data-company
не равноMicrosoft
так далее...
Одно предостережение нового
:data()
селектора заключается в том, что вы должны установитьdata
значение по коду для его выбора. Это означает, что для работы вышеупомянутого определенияdata
в HTML недостаточно. Вы должны сначала сделать это:Это хорошо для одностраничных приложений, где вы, вероятно, будете использовать
$(...).data("datakey", "value")
это или аналогичные способы.источник
:data()
селектор или.data()
метод?jsFiddle Demo
jQuery предоставляет несколько селекторов (полный список) для выполнения запросов, которые вы ищете. Для ответа на ваш вопрос «В других случаях можно использовать другие селекторы, такие как« содержит, меньше, больше, и т. Д ... ».» Вы также можете использовать содержит, начинается с и заканчивается для просмотра этих атрибутов данных html5. Смотрите полный список выше, чтобы увидеть все ваши варианты.
Основной выполнение запроса было покрыто выше, и с помощью Джона Hartsock «s ответ будет лучшим выбором либо получить каждый элемент данных компании, или получить каждый , за исключением Microsoft (или любой другой вариант
:not
).Чтобы расширить это до других пунктов, которые вы ищете, мы можем использовать несколько мета-селекторов. Во-первых, если вы собираетесь выполнять несколько запросов, желательно кэшировать родительский выбор.
Далее, мы можем искать компании в этом наборе, которые начинают с G
Или, возможно, компании, которые содержат слово мягкое
Также возможно получить элементы, чьи совпадения заканчиваются в атрибуте данных
источник
Чистое / ванильное решение JS (рабочий пример здесь )
В querySelectorAll вы должны использовать действительный селектор CSS (в настоящее время Level3 )
ТЕСТ СКОРОСТИ (2018.06.29) для jQuery и Pure JS: тест проводился на MacOs High Sierra 10.13.3 на Chrome 67.0.3396.99 (64-разрядная версия), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 -немного). На скриншоте ниже показаны результаты для самого быстрого браузера (Safari):
PureJS был быстрее, чем jQuery, около 12% в Chrome, 21% в Firefox и 25% в Safari. Интересно, что скорость Chrome составляла 18,9 млн. Операций в секунду, Firefox 26M, Safari 160,9 млн. (!).
Таким образом, победителем стал PureJS, а самым быстрым браузером стал Safari (более чем в 8 раз быстрее, чем Chrome!)
Здесь вы можете выполнить тестирование на своем компьютере: https://jsperf.com/js-selectors-x
источник