javascript metodi - Come posso selezionare un elemento con più classi in jQuery?




ricerca suo (10)

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.

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.


Puoi farlo usando la funzione filter() :

$(".a").filter(".b")

Non hai bisogno di jQuery per questo

In Vanilla puoi fare:

document.querySelectorAll('.a.b')

Soluzione JavaScript vaniglia: -

document.querySelectorAll('.a.b')


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 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.


Selettore di gruppo

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;}

Diventa questo:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Quindi nel tuo caso hai provato il selettore di gruppo mentre è un incrocio

$(".a, .b") 

invece usa questo

$(".a.b") 

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')

Basta menzionare un altro caso con l'elemento:

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

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


Se si desidera scorrere all'interno di un contenitore di overflow (invece di $('html, body') sopra), funzionando anche con il posizionamento assoluto, questo è il modo di fare:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}




javascript jquery css-selectors jquery-selectors