Selektory jQuery dotyczące niestandardowych atrybutów danych za pomocą HTML5

Chciałbym wiedzieć, jakie selektory są dostępne dla tych atrybutów danych, które są dostarczane z HTML5.

Biorąc ten fragment HTML za przykład:

<ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company ="Facebook"></li>
</ul>

Czy są selektory, aby uzyskać:

• Wszystkie elementy data-company="Microsoft"poniżej"Companies"
• Wszystkie elementy data-company!="Microsoft"poniżej"Companies"
• W innych przypadkach możliwe jest użycie innych selektorów, takich jak „zawiera, mniej niż, więcej niż itp.”.

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

Zajrzyj do jQuery Selectors : zawiera jest selektorem

oto informacje o : zawiera selektor

jQuery UI ma :data() selektor, którego można również użyć. Wydaje się, że istnieje już od wersji 1.7.0 .

Możesz użyć tego w następujący sposób:

Zdobądź wszystkie elementy za pomocą data-company atrybutem

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

Zdobądź wszystkie elementy, które są data-companyrówneMicrosoft

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

Zdobądź wszystkie elementy, w których data-companynie jest równaMicrosoft

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

itp...

Jednym z zastrzeżeń nowego :data()selektora jest to, że należy ustawić datawartość według kodu , aby można go było wybrać. Oznacza to, że aby powyższe działało, zdefiniowanie dataw HTML nie wystarczy. Najpierw musisz to zrobić:

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

Jest to dobre w przypadku aplikacji jednostronicowych, w których możesz używać $(...).data("datakey", "value")w ten lub podobny sposób.

jsFiddle Demo

jQuery udostępnia kilka selektorów (pełna lista) w celu wykonania zapytań, których szukasz. Aby odpowiedzieć na twoje pytanie „W innych przypadkach można użyć innych selektorów, takich jak„ zawiera, mniej niż, większy niż itp ... ”. możesz także użyć zawiera, zaczyna się i kończy na, aby spojrzeć na te atrybuty danych HTML5. Zobacz pełną listę powyżej, aby zobaczyć wszystkie swoje opcje.

Podstawowym zapytań została pokryta powyżej, a przy użyciu John Hartsock „s odpowiedź będzie najlepszym albo dostać każdy element danych firmy, lub dostać każdy z wyjątkiem Microsoft (lub dowolną inną wersję :not).

Aby rozszerzyć to na inne punkty, których szukasz, możemy użyć kilku meta selektorów. Po pierwsze, jeśli zamierzasz wykonać wiele zapytań, dobrze jest buforować selekcję nadrzędną.

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

Następnie możemy poszukać firm w tym zestawie, które zaczynają się na G

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

A może firmy, które zawierają słowo soft

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

Możliwe jest również uzyskanie elementów, których końcowe atrybuty danych są zgodne

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>

Rozwiązanie JS Pure / waniliowe ( tutaj działa przykład )

// 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'])"); 

W querySelectorAll musisz użyć prawidłowego selektora CSS (obecnie Level3 )

SPEED TEST (2018.06.29) dla jQuery i Pure JS: test został przeprowadzony na MacOs High Sierra 10.13.3 na Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 -kawałek). Poniższy zrzut ekranu pokazuje wyniki dla najszybszej przeglądarki (Safari):

PureJS był szybszy niż jQuery o 12% w przeglądarce Chrome, 21% w przeglądarce Firefox i 25% w przeglądarce Safari. Co ciekawe, prędkość przeglądarki Chrome wynosiła 18,9 mln operacji na sekundę, Firefox 26 mln, Safari 160,9 mln (!).

Zwycięzcą jest PureJS, a najszybszą przeglądarką jest Safari (ponad 8 razy szybsza niż Chrome!)

Tutaj możesz wykonać test na swoim komputerze: https://jsperf.com/js-selectors-x