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


636

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.”.

4
Jeśli zajrzysz tutaj, znajdziesz wszystko, czego potrzebujesz api.jquery.com/category/selectors :-)
Allan Kimmer Jensen

Odpowiedzi:


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


Czy to zadziała? $('div[data-col="1"][data-row="2"]') Czy to wybierze div, gdzie kolumna danych równa się 1, a wiersz danych równa się 2, czy też wybierze jedną z nich?
LuudJacobs,

10
Czy to zadziała, jeśli dane zostaną ustawione za pomocą .data („coś”, wartość)? Często nie tworzy to rzeczywistego atrybutu podczas dołączania wartości. Wiem, że OP był dość konkretny w odniesieniu do atrybutów, ale pomyślałem, że podniosę świadomość na wypadek, gdyby inni mieli problem z tym selektorem.
AaronLS,

15
@AaronLS Nie, nie ma (przynajmniej nie ze starszymi wersjami jQuery, np. 1.4.4) - musisz ustawić dane, .attr('data-something', 'value')aby zobaczyć aktualizację w HTML. Zgodnie z stackoverflow.com/questions/6827810/…
Matty J

Czy nie ma sposobu na uzyskanie wartości atrybutów danych bez wpisywania datawywołania?
ahnbizcad

@gwho$('#element').data('something')
Gaui

69

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.


Nie rozumiem twojego zastrzeżenia. Działa to dla mnie dobrze i nie odnoszę się do danych w js. $ ('# id'). text ($ ('# mydatasource'). data ('empty')); Spowoduje to zapełnienie elementu #id zawartością pustego znacznika danych w elemencie #mydatasource.
Relaks na Cyprze

4
@FacebookAnswers Czy używałeś :data()selektora lub .data()metody?
ruguje

Rozumiem, co masz na myśli. Korzystałem z tej metody, a twoje zastrzeżenie odnosiło się do tej metody.
Relaxing In Cyprus

7
^ masz na myśli, że jego zastrzeżenie odnosiło się do selektora.
ahnbizcad

1
Dziwne, teraz wydaje się działać w skrzypcach z Jquery 3.3.1: jsfiddle.net/kai_noack/q6nzLs20/1
Kai Noack

39

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>


6

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):

wprowadź opis zdjęcia tutaj

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.