Селектори 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значення за кодом для його вибору. Це означає, що для роботи вище, визначення dataHTML-кодів недостатньо. Спочатку потрібно зробити це:

$("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

Або, можливо, компанії, які містять слово 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>

Чистий / ванільний розчин 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'])"); 

У querySelectorВсі потрібно використовувати дійсний селектор CSS (зараз рівень 3 )

SPEED TEST (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,9M (!).

Тож перемагає PureJS, а найшвидший браузер - Safari (більш ніж у 8 разів швидше, ніж Chrome!)

Тут ви можете виконати тест на своїй машині: https://jsperf.com/js-selectors-x