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

Question

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

Answer 1

$("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 Selectors : содержит селектор

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

Answer 2

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") подобным или аналогичным образом.

Answer 3

jsFiddle Demo

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

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

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

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

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

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

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

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>

Answer 4

Чистый / ванильный раствор 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