Say mam to:JavaScript - jak zdobyć elementy z wieloma klasami
<div class="class1 class2"></div>
Jak wybrać tę div elementu?
document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]
To nie działa. Wiem, że w jQuery jest to $('.class1.class2'), ale chciałbym wybrać go z vanilla JavaScript.
To rzeczywiście bardzo podobny do jQuery:
document.getElementsByClassName('class1 class2')
querySelectorAll standardowych selektorów klasy działa również w tej sprawie.
document.querySelectorAll('.class1.class2');
To nie działa, musi być 'document.querySelectorAll (" .klasa1, .class2 ");' – bazzlebrush
@bazzlebrush twój selektor przechwyciłby elementy za pomocą '.class1' OR '.class2', podczas gdy powyższy zapisałby tylko elementy z * obydwoma * klasami i faktycznie działa. Zobacz wyniki tego testu na konsolecie: https://jsfiddle.net/0ph1p9p2/ – filoxo
OK, mój zły, źle zrozumiałem, co OP chciał zrobić. Ale IMO bardziej typowym przypadkiem użycia jest chęć wybrania elementów, które mają albo klasę albo obie, w takim przypadku mój przykład jest tym, czego potrzebujesz. – bazzlebrush
W rzeczywistości odpowiedź @bazzlebrush i komentarz @filoxo bardzo mi pomogły.
musiałem znaleźć elementy, gdzie klasa może być „zA yO” LUB „za zE”
jQuery ja najpierw wybrać rodzica pożądanych elementów:
(div z Klasa zaczynające się od 'abc' i style =! 'display: none')
var tom = $('div[class^="abc"][style!="display: none;"]')[0];
następnie żądane dzieci tego elementu:
var ax = tom.querySelectorAll('.zA.yO, .zA.zE');
działa idealnie! pamiętaj, że nie musisz robić document.querySelector możesz jak wyżej przejść w uprzednio wybranym obiekcie.
Jak powiedział @filoxo, można użyć document.querySelectorAll.
Jeśli wiesz, że istnieje tylko jeden element z klasą, której szukasz, lub jesteś zainteresowany tylko w pierwszej, można użyć:
document.querySelector('.class1.class2');
BTW, podczas .class1.class2 wskazuje element z oba klas, .class1 .class2 (zauważyć spacje) wskazuje hierarchię - i element z klasy class2 który jest wewnątrz pl elementu z klasą class1:
<div class='class1'>
<div>
<div class='class2'>
:
:
A jeśli chcesz, aby wymusić pobieranie bezpośredni dziecka, użyj > znak (.class1 > .class2):
<div class='class1'>
<div class='class2'>
:
:
Dla całej informacji na temat selektorów:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
i wow ja jestem głupi czy co? –
Mówię, co mój przyjaciel, każdy ma coś do nauczenia. – Joe