Czy istnieje prosta i prosta metoda wybierania elementów na podstawie ich data
atrybutów? Na przykład wybierz wszystkie kotwice, które mają nazwany atrybut danych o customerID
wartości 22
.
Waham się przed użyciem rel
lub innymi atrybutami do przechowywania takich informacji, ale znacznie trudniej jest mi wybrać element na podstawie tego, jakie dane są w nim przechowywane.
jquery
html
custom-data-attribute
Hazem Salama
źródło
źródło
$('*[data-customerID]')
Można go używać z np$('*[data-customerID]').each( function() { ... });
Odpowiedzi:
Powinieneś być w stanie pominąć
*
, ale jeśli dobrze pamiętam, w zależności od używanej wersji jQuery, może to dawać błędne wyniki.Należy pamiętać, że w celu zapewnienia zgodności z interfejsem API selektorów (
document.querySelector{,all}
), cytaty wokół wartości atrybutu (22
) mogą nie zostać w tym przypadku pominięte .Ponadto, jeśli często pracujesz z atrybutami danych w skryptach jQuery, możesz rozważyć użycie wtyczki niestandardowych atrybutów danych HTML5 . Pozwala to na pisanie jeszcze bardziej czytelnego kodu przy użyciu
.dataAttr('foo')
i powoduje zmniejszenie rozmiaru pliku po zmniejszeniu (w porównaniu do użycia.attr('data-foo')
).źródło
.data()
mapuje się na niestandardowedata-*
atrybuty, co powoduje, że ta wtyczka jest zbędna. Nadal jednak można go używać w starszych wersjach jQuery. ”$('[data-customerID]')
.data()
), prawda?Dla osób korzystających z Google i chcących bardziej ogólnych zasad dotyczących wybierania za pomocą atrybutów danych:
$("[data-test]")
wybierze dowolny element, który ma tylko atrybut danych (bez względu na wartość atrybutu). Włącznie z:$('[data-test~="foo"]')
wybierze dowolny element, w którym atrybut danych zawiera,foo
ale nie musi być dokładny, taki jak:$('[data-test="the_exact_value"]')
wybierze dowolny element, w którym dokładna wartość atrybutu danych tothe_exact_value
, na przykład:ale nie
źródło
~=
pasuje do słów oddzielonych spacjami, natomiast*=
pasuje do dowolnego podłańcucha.^
postacią?$('[data-test^=foo]')
w takim przypadku wybierasz wszystko zaczynające się od foo, takie jak<div data-test="foo_exact_value">
lub<div data-test="food">
nie<div data-test="seafoo">
Używanie
$('[data-whatever="myvalue"]')
wybierze wszystko z atrybutami html, ale w nowszych jQueries wydaje się, że jeśli użyjesz$(...).data(...)
do dołączenia danych, używa jakiejś magicznej przeglądarki i nie wpływa na html, dlatego nie jest wykrywane przez,.find
jak wskazano w poprzedniej odpowiedzi .Weryfikacja (testowana w wersji 1.7.2+) (patrz także skrzypce ): (zaktualizowano, aby była bardziej kompletna)
źródło
.filter
tutaj$item.attr('data-id', 10);
Nie widziałem odpowiedzi JavaScript bez jQuery. Mam nadzieję, że to komuś pomaga.
Informacje:
atrybuty danych
.querySelectorAll ();
źródło
Aby wybrać wszystkie kotwice z atrybutem danych
data-customerID==22
, należy uwzględnić opcjęa
ograniczenia zakresu wyszukiwania tylko do tego typu elementu. Przeszukiwanie atrybutów danych w dużej pętli lub z dużą częstotliwością, gdy na stronie znajduje się wiele elementów, może powodować problemy z wydajnością.źródło
Przykłady natywnych JS
Uzyskaj NodeList elementów
HTML:
<div data-id="container"></div>
Zdobądź pierwszy element
HTML:
<div id="container"></div>
Kieruj na zbiór węzłów, który zwraca listę węzłów
HTML:
Uzyskaj elementy w oparciu o wiele wartości danych (OR)
HTML:
Uzyskaj elementy na podstawie połączonych (I) wartości danych
HTML:
Zdobądź przedmioty, od których zaczyna się wartość
źródło
za pomocą metody Jquery filter ():
http://jsfiddle.net/9n4e1agn/1/
HTML:
JavaScript:
źródło
Taka konstrukcja:
$('[data-XXX=111]')
nie działa w przeglądarce Safari 8.0 .Jeśli ustawisz atrybut danych w ten sposób:
$('div').data('XXX', 111)
działa to tylko wtedy, gdy ustawisz atrybut danych bezpośrednio w DOM w następujący sposób:$('div').attr('data-XXX', 111)
.Myślę, że dzieje się tak, ponieważ zespół jQuery zoptymalizował moduł wyrzucania elementów bezużytecznych, aby zapobiec wyciekom pamięci i ciężkim operacjom odbudowywania DOM przy każdym atrybucie zmiany danych.
źródło
Aby działało to w Chrome, wartość nie może zawierać innej pary cudzysłowów.
Działa tylko na przykład tak:
źródło
$('[data-action=setStatus]').removeClass('disabled')
Czasami pożądane jest filtrowanie elementów na podstawie tego, czy mają one dołączone do nich elementy danych programowo (inaczej nie poprzez atrybuty dom):
Powyższe działa, ale nie jest bardzo czytelne. Lepszym podejściem jest użycie pseudoselektora do testowania tego rodzaju rzeczy:
Teraz możemy zmienić oryginalne stwierdzenie na coś bardziej płynnego i czytelnego:
źródło
Aby uzupełnić wszystkie odpowiedzi pewnymi funkcjami „standardu życia” - do tej pory (w erze HTML5) można to zrobić bez bibliotek innych firm:
document.querySelector('[data-answer="42"],[type="submit"]')
document.querySelectorAll('[data-answer="42"],[type="submit"]')
[data-answer="42"],[type="submit"]
[data-answer]
lubinput[type]
źródło