Селекторы jQuery для пользовательских атрибутов данных с использованием HTML5

Я хотел бы знать, какие селекторы доступны для этих атрибутов данных, которые поставляются с 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"
• В других случаях возможно использование других селекторов, таких как «содержит, меньше, больше, и т.д ...».

$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

Посмотрите на JQuery Селекторы : содержит селектор

вот информация о : содержит селектор

jQuery UIимеет :data()селектор, который также может быть использован. Похоже, это было с версии 1.7.0 .

Вы можете использовать это так:

Получить все элементы с data-companyатрибутом

var companyElements = $("ul:data(group) li:data(company)");

Получить все элементы, где data-companyравныMicrosoft

var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

Получить все элементы, где data-companyне равноMicrosoft

var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

так далее...

Одно предостережение нового :data()селектора заключается в том, что вы должны установить dataзначение по коду для его выбора. Это означает, что для работы вышеупомянутого определения dataв HTML недостаточно. Вы должны сначала сделать это:

$("li").first().data("company", "Microsoft");

Это хорошо для одностраничных приложений, где вы, вероятно, будете использовать $(...).data("datakey", "value")это или аналогичные способы.

jsFiddle Demo

jQuery предоставляет несколько селекторов (полный список) для выполнения запросов, которые вы ищете. Для ответа на ваш вопрос «В других случаях можно использовать другие селекторы, такие как« содержит, меньше, больше, и т. Д ... ».» Вы также можете использовать содержит, начинается с и заканчивается для просмотра этих атрибутов данных html5. Смотрите полный список выше, чтобы увидеть все ваши варианты.

Основной выполнение запроса было покрыто выше, и с помощью Джона Hartsock «s ответ будет лучшим выбором либо получить каждый элемент данных компании, или получить каждый , за исключением Microsoft (или любой другой вариант :not).

Чтобы расширить это до других пунктов, которые вы ищете, мы можем использовать несколько мета-селекторов. Во-первых, если вы собираетесь выполнять несколько запросов, желательно кэшировать родительский выбор.

var group = $('ul[data-group="Companies"]');

Далее, мы можем искать компании в этом наборе, которые начинают с G

var google = $('[data-company^="G"]',group);//google

Или, возможно, компании, которые содержат слово мягкое

var microsoft = $('[data-company*="soft"]',group);//microsoft

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

var facebook = $('[data-company$="book"]',group);//facebook

//stored selector
var group = $('ul[data-group="Companies"]');

//data-company starts with G
var google = $('[data-company^="G"]',group).css('color','green');

//data-company contains soft
var microsoft = $('[data-company*="soft"]',group).css('color','blue');

//data-company ends with book
var facebook = $('[data-company$="book"]',group).css('color','pink');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
  <li data-company="Microsoft">Microsoft</li>
  <li data-company="Google">Google</li>
  <li data-company ="Facebook">Facebook</li>
</ul>

Чистое / ванильное решение JS (рабочий пример здесь )

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']"); 

// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])"); 

В 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