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.”.
Odpowiedzi:
Zajrzyj do jQuery Selectors : zawiera jest selektorem
oto informacje o : zawiera selektor
źródło
$('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?.attr('data-something', 'value')
aby zobaczyć aktualizację w HTML. Zgodnie z stackoverflow.com/questions/6827810/…data
wywołania?$('#element').data('something')
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
atrybutemZdobądź wszystkie elementy, które są
data-company
równeMicrosoft
Zdobądź wszystkie elementy, w których
data-company
nie jest równaMicrosoft
itp...
Jednym z zastrzeżeń nowego
:data()
selektora jest to, że należy ustawićdata
wartość według kodu , aby można go było wybrać. Oznacza to, że aby powyższe działało, zdefiniowaniedata
w HTML nie wystarczy. Najpierw musisz to zrobić:Jest to dobre w przypadku aplikacji jednostronicowych, w których możesz używać
$(...).data("datakey", "value")
w ten lub podobny sposób.źródło
:data()
selektora lub.data()
metody?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ą.
Następnie możemy poszukać firm w tym zestawie, które zaczynają się na G
A może firmy, które zawierają słowo soft
Możliwe jest również uzyskanie elementów, których końcowe atrybuty danych są zgodne
źródło
Rozwiązanie JS Pure / waniliowe ( tutaj działa przykład )
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
źródło