Jak Mogę wybrać element z wieloma klasami w jQuery?
Chcę wybrać wszystkie elementy, które mają dwie klasy a
i b
.
<element class="a b">
Więc tylko te elementy, które mają obie klasy.
Kiedy używam $(".a, .b")
daje mi związek, ale chcę skrzyżowanie.
11 answers
Jeśli chcesz przecięcia, po prostu napisz selektory razem bez spacji pomiędzy.
$('.a.b')
Więc dla elementu, który ma ID a
z klasami b
i c
, napiszesz:
$('#a.b.c')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-12 15:21:15
Możesz to zrobić za pomocą filter()
Funkcja:
$(".a").filter(".b")
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-30 13:56:34
Do sprawy
<element class="a">
<element class="b c">
</element>
</element>
Trzeba by umieścić spację pomiędzy .a
i .b.c
$('.a .b.c')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-30 15:52:07
Problem polega na tym, że używasz Group Selector
, podczas gdy powinieneś używać Multiples selector
! Aby być bardziej szczegółowym, używasz $('.a, .b')
, podczas gdy powinieneś używać $('.a.b')
.
Aby uzyskać więcej informacji, zobacz przegląd różnych sposobów łączenia selektorów poniżej!
Selektor Grup :", "
Select all <h1>
elements AND all <p>
elements AND all <a>
elements :
$('h1, p, a')
Multiples selector: "" (brak znaku)
Zaznacz wszystkie <input>
elementy type
text
, z klasami code
i red
:
$('input[type="text"].code.red')
Selektor potomka: "" (spacja)
Wybierz wszystkie <i>
elementy wewnątrz <p>
elementy:
$('p i')
Child Selector: "> "
Wybierz wszystkie <ul>
elementy, które są bezpośrednimi potomkami elementu <li>
:
$('li > ul')
Sąsiedni Selektor Rodzeństwa: "+ "
Zaznacz wszystkie <a>
elementy, które są umieszczone bezpośrednio po <h2>
elementy:
$('h2 + a')
Ogólne Rodzeństwo Selektor: "~ "
Wybierz wszystkie <span>
elementy, które są rodzeństwem <div>
elementów:
$('div ~ span')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-29 14:44:03
$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">a
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-27 07:52:32
Wystarczy wspomnieć o innym przypadku z elementem:
Np. <div id="title1" class="A B C">
Wpisz: $("div#title1.A.B.C")
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-14 16:15:11
Vanilla JavaScript solution: -
document.querySelectorAll('.a.b')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-29 18:02:58
Dla lepszej wydajności można użyć
$('div.a.b')
Będzie to przeglądać tylko elementy div zamiast przechodzić przez wszystkie elementy html, które masz na swojej stronie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-28 05:26:30
Selektor Grup
body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}
Staje się to:
body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}
Więc w Twoim przypadku próbowałeś selektora grupy, podczas gdy jest to skrzyżowanie
$(".a, .b")
Zamiast tego użyj tego
$(".a.b")
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-17 13:57:26
Nie potrzebujesz jQuery
do tego
W Vanilla
możesz zrobić:
document.querySelectorAll('.a.b')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-04 08:00:13
Możesz użyć metody getElementsByClassName()
do tego, co chcesz.
var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
console.log(elems[0]);
<ul>
<li class="a">a</li>
<li class="a b">a, b</li>
<li class="a b c">a, b, c</li>
</ul>
To również najszybsze rozwiązanie. możesz zobaczyć punkt odniesienia o tym tutaj .Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-01 10:41:07