javascript - selettori - è possibile selezionare un elemento html e il suo attributo




Come posso selezionare un elemento con più classi in jQuery? (8)

Voglio selezionare tutti gli elementi che hanno le due classi b .

<element class="a b">

Quindi, solo gli elementi che hanno entrambe le classi.

Quando uso $(".a, .b") mi dà l'unione, ma voglio l'intersezione.


Basta menzionare un altro caso con l'elemento:

Ad esempio <div id="title1" class="ABC">

Basta digitare: $("div#title1.ABC")


Il problema che stai avendo è che stai usando un Group Selector , mentre dovresti usare un Multiples selector ! Per essere più specifici, stai usando $('.a, .b') mentre dovresti usare $('.a.b') .

Per ulteriori informazioni, vedere la panoramica dei diversi modi di combinare i selettori qui sotto!

Selettore gruppo: ","

Seleziona tutti gli elementi <h1> E tutti gli elementi <p> E tutti gli elementi <a> :

$('h1, p, a')

Selettore Multipli: "" (nessun carattere)

Seleziona tutti gli elementi <input> di type text , con code classi e red :

$('input[type="text"].code.red')

Selettore dei discendenti: "" (spazio)

Seleziona tutti <i> elementi <i> all'interno degli elementi <p> :

$('p i')

Selettore bambino: ">"

Seleziona tutti gli elementi <ul> che sono figli immediati di un elemento <li> :

$('li > ul')

Selettore della Sibling adiacente: "+"

Seleziona tutti gli elementi <a> posizionati immediatamente dopo gli elementi <h2> :

$('h2 + a')

Selettore generale del fratello germano: "~"

Seleziona tutti gli elementi <span> che sono fratelli di <div> elementi:

$('div ~ span')

Per il caso

<element class="a">
  <element class="b c">
  </element>
</element>

Dovresti inserire uno spazio tra .a e .bc

$('.a .b.c')

Per prestazioni migliori puoi usare

$('div.a.b')

Questo guarderà solo attraverso gli elementi div invece di passare attraverso tutti gli elementi html che hai sulla tua pagina.


Puoi usare il metodo getElementsByClassName() per quello che vuoi.

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>

Questa è anche la soluzione più veloce. qui puoi vedere un punto di riferimento.


Se vuoi abbinare solo elementi con entrambe le classi (un'intersezione, come un AND logico), scrivi semplicemente i selettori insieme senza spazi tra:

$('.a.b')

Quindi per un elemento div che ha un ID di a con le classi b e c , dovresti scrivere:

$('div#a.b.c')

Soluzione JavaScript vaniglia: -

document.querySelectorAll('.a.b')


$('.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>





jquery-selectors