selektory jQuery na niestandardowych atrybutach danych przy użyciu HTML5

jQuery UI mA :data() selektor , który może być również używany. Wydaje się, że istnieje od wersji 1.7.0.

Możesz go użyć tak:

Pobierz wszystkie elementy z atrybutem data-company

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

Get all elements where data-company equals Microsoft

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

Get all elements where data-company does not equal Microsoft

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

itd...

Zastrzeżenie nowego selektora :data() jest takie, że musisz ustaw wartość data kodem , aby została wybrana. Oznacza to, że do działania powyższego, zdefiniowanie data W HTML nie wystarczy. Najpierw musisz to zrobić:

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

Jest to odpowiednie dla 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 tworzenia zapytań, których szukasz. Aby odpowiedzieć na twoje pytanie "w innych przypadkach jest możliwe użycie innych selektorów, takich jak" zawiera, mniej niż, więcej niż, itp..."." możesz również użyć contains, zaczyna się i kończy, aby spojrzeć na te atrybuty danych html5. Zobacz pełną listę powyżej, aby zobaczyć wszystkie opcje.

Podstawowe pytania zostały omówione powyżej, a użycie John Hartsock 'S ' s answer będzie najlepszym rozwiązaniem, aby uzyskać każdy element firmy danych lub uzyskać każdy z wyjątkiem Microsoft (lub dowolnej innej wersji :not).

W celu rozszerzenia tego na inne punkty, których szukasz, możemy użyć kilku selektorów meta. Po pierwsze, jeśli masz zamiar wykonać wiele zapytań, dobrze jest buforować wybór rodzica.

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

Następnie możemy poszukać w tym zestawie firm, które zacznij od G

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

A może firmy zawierające słowo soft

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

Możliwe jest również uzyskanie elementów, których atrybuty końcowe 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>

Pure / vanilla js solution (Przykład roboczy tutaj )

// 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ć valid CSS selector (aktualnie Level3)

Test prędkości (2018.06.29) dla jQuery i Pure JS: test przeprowadzono 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-bit). Poniżej zrzut ekranu pokazuje wyniki dla najszybszej przeglądarki "Safari": {]}

Tak więc zwycięzcą jest PureJS , a najszybszą przeglądarką jest Safari (ponad 8x szybciej niż Chrome!)

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