Powiedz, że mam to:
<div class="class1 class2"></div>
Jak wybrać ten div
element?
document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]
To nie działa.
Wiem, że w jQuery tak jest $('.class1.class2')
, ale chciałbym to wybrać za pomocą waniliowego JavaScript.
javascript
class
element
Nathan Prometheus
źródło
źródło
AND (obie klasy)
LUB (co najmniej jedna klasa)
XOR (jedna klasa, ale nie druga)
NAND (nie obie klasy)
NOR (nie żadna z dwóch klas)
źródło
W tym przypadku działa również querySelectorAll ze standardowymi selektorami klas.
źródło
document.querySelectorAll('.class1, .class2');
.class1
OR.class2
, podczas gdy ten powyżej przechwyciłby tylko elementy z obiema klasami i faktycznie działa. Zobacz konsolowe wyniki tego testu: jsfiddle.net/0ph1p9p2Jak powiedział @filoxo, możesz użyć
document.querySelectorAll
.Jeśli wiesz, że w klasie, której szukasz, jest tylko jeden element lub interesuje Cię tylko ten pierwszy, możesz użyć:
BTW, while
.class1.class2
wskazuje element z obiema klasami,.class1 .class2
(zwróć uwagę na białą spację) wskazuje na hierarchię - i element z klasą,class2
który znajduje się wewnątrz elementu en z klasąclass1
:A jeśli chcesz wymusić pobranie bezpośredniego dziecka, użyj
>
znaku (.class1 > .class2
):Pełne informacje na temat selektorów:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
źródło
html
kod javascritp
Metoda querySelectorAll () zwraca wszystkie elementy w dokumencie, które pasują do określonego selektora CSS, jako statyczny obiekt NodeList.
Obiekt NodeList reprezentuje kolekcję węzłów. Dostęp do węzłów można uzyskać za pomocą numerów indeksu. Indeks zaczyna się od 0.
dowiedz się również więcej o https://www.w3schools.com/jsref/met_document_queryselectorall.asp
== Dziękuję ==
źródło
OK, ten kod robi dokładnie to, czego potrzebujesz:
HTML:
JS:
Mam nadzieję, że to pomoże! ;)
źródło
właściwie odpowiedź @bazzlebrush i komentarz @filoxo bardzo mi pomogły.
Musiałem znaleźć elementy, w których klasa mogłaby być „zA yO” LUB „zA zE”
Używając jquery najpierw wybieram rodzica żądanych elementów:
(element div z klasą zaczynającą się od „abc” i stylem! = „display: none”)
następnie pożądane dzieci tego elementu:
działa świetnie! zauważ, że nie musisz robić document.querySelector, możesz jak powyżej przekazać wstępnie wybrany obiekt.
źródło