Como posso selecionar um elemento com várias classes no jQuery?

Eu quero selecionar todos os elementos que têm as duas classes ae b.

<element class="a b">

Portanto, apenas os elementos que possuem ambas as classes.

Quando uso $(".a, .b"), me dá a união, mas quero o cruzamento.

Se você deseja combinar apenas elementos com ambas as classes (uma interseção, como um AND lógico), basta escrever os seletores juntos sem espaços no meio:

$('.a.b')

A ordem não é relevante, portanto você também pode trocar as classes:

$('.b.a')

Então, para combinar um divelemento que possui um ID acom as classes be c, você deve escrever:

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

(Na prática, é provável que você não precise obter esse específico, e um seletor de ID ou classe por si só costuma ser suficiente:. $('#a'))

Você pode fazer isso usando a filter()função:

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

Para o caso

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

Você precisaria colocar um espaço entre .ae.b.c

$('.a .b.c')

O problema que você está tendo é que você está usando a Group Selector, enquanto que você deve usar a Multiples selector! Para ser mais específico, você está usando $('.a, .b')enquanto deveria estar $('.a.b').

Para obter mais informações, consulte a visão geral das diferentes maneiras de combinar os seletores abaixo!

Seletor de grupo: ","

Selecione todos os <h1>elementos E todos os <p>elementos E todos os <a>elementos:

$('h1, p, a')

Seletor de múltiplos: "" (nenhum caractere)

Selecione todos os <input>elementos de type text, com classes codee red:

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

Seletor descendente: "" (espaço)

Selecione todos os <i>elementos dentro dos <p>elementos:

$('p i')

Seletor filho: ">"

Selecione todos os <ul>elementos que são filhos imediatos de um <li>elemento:

$('li > ul')

Seletor de irmão adjacente: "+"

Selecione todos os <a>elementos que são colocados imediatamente após os <h2>elementos:

$('h2 + a')

Seletor geral de irmãos: "~"

Selecione todos os <span>elementos que são irmãos de <div>elementos:

$('div ~ span')

Apenas mencione outro caso com o elemento:

Por exemplo <div id="title1" class="A B C">

Basta digitar: $("div#title1.A.B.C")

Solução JavaScript Vanilla: -

document.querySelectorAll('.a.b')

Para um melhor desempenho, você pode usar

$('div.a.b')

Isso será exibido apenas através dos elementos div, em vez de percorrer todos os elementos html que você possui na sua página.

Seletor de grupo

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

Torna-se isso:

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

Então, no seu caso, você tentou o seletor de grupo, enquanto é uma interseção

$(".a, .b") 

em vez disso, use isso

$(".a.b") 

Você não precisa jQuerydisso

Em Vanillavocê pode fazer:

document.querySelectorAll('.a.b')

seu código $(".a, .b")funcionará abaixo de vários elementos (ao mesmo tempo)

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

se você deseja selecionar o elemento que tem a e b da classe como <element class="a b">usar js sem coma

$('.a.b')

Você pode usar o getElementsByClassName()método para o que deseja.

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>

Esta é a solução mais rápida também. você pode ver uma referência sobre isso aqui .

var elem = document.querySelector (". ab");