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

2062

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.

Mladen
fonte
2
Seria bom se você pudesse definir o que união e intersecção meios para nós Newbs :)
Kolob Canyon
10
União e interseção @KolobCanyon são conceitos básicos da teoria dos conjuntos. Assim, por exemplo, um sindicato seria todos falantes de francês (inclui homens e mulheres), enquanto um cruzamento seria todas as mulheres que falam francês (exclui todos que não falam francês e exclui todas as pessoas que não são mulheres). Uniões e interseções podem ser feitas com qualquer número de características que definem cada conjunto. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
Katharine Osborne
6
Eu acho que você quer dizer que, dos dois conjuntos "mulheres" e "falantes de francês", a união seria todas as mulheres do mundo e todos os falantes de francês do mundo, um conjunto que inclui as mulheres que não falam Homens franceses e de língua francesa. O cruzamento é, como você escreveu, apenas aquelas mulheres que falam francês.
Teemu Leisti 08/09/16

Respostas:

2628

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

Sasha Chedygov
fonte
9
@ Flater: Foi apenas por uma questão de exemplo. Mas pode ser útil se as classes be csão adicionados dinamicamente, e você só quer selecionar o elemento se ele tem essas classes.
Sasha Chedygov 7/08
3
Ah, bom ponto :-) Até agora eu usaria .hasClass (), mas essa é uma notação muito melhor.
Flater
4
Este método de selecção também funciona para CSS por exemplo .ab {propriedades do estilo} ver: css-tricks.com/multiple-class-id-selectors
Chris Halcrow
30
@Shimmy: Sim. Um espaço entre dois seletores significa que você está procurando descendentes; ou seja, .a .bprocura por elementos com classe bdescendentes de um elemento com classe a. Então, algo como div aretornará apenas aelementos que estão dentro de um divelemento.
Sasha Chedygov
2
@AaA: Isso está incorreto; tem sido assim desde o início do jQuery, porque é assim que o CSS funciona. Uma vírgula seleciona elementos que correspondem a um dos seletores (pense nisso como um OR lógico), não ambos, portanto não é a mesma coisa (embora eu possa ver como isso pode ser confuso).
Sasha Chedygov
174

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

$(".a").filter(".b")
Jamie Love
fonte
16
Qual é a diferença entre esta resposta e a aceita?
Vivian River
49
@ Rice: Este será um pouco mais lento, porque criará uma lista de objetos com a classe "a" primeiro e depois removerá todos, exceto aqueles que possuem a classe "b", enquanto o meu faz isso em uma única etapa. Mas, caso contrário, não há diferença.
Sasha Chedygov 08/09/11
5
Isso funcionou para mim em um exemplo em que eu estava procurando por uma classe definida como uma variável, que não funcionava com a sintaxe no primeiro exemplo. por exemplo: $ ('. foo'). filter (variável). Obrigado
pac
7
@pac: $ ('. foo' + variable) deveria ter feito o truque, mas posso ver onde esse método seria mais claro nesse caso.
Sasha Chedygov
6
Isso também é mais eficiente se você já encontrou .ae precisa filtrar várias vezes com base em diferentes classes arbitrárias que também pertencem ao .aconjunto original .
Qix - MONICA FOI ERRADA em
123

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')
juanpaulo
fonte
Adicionando sua resposta, eu gostaria de saber como acessar os bec se o caso for o seguinte: <element class = "a"> <elemento class = "b"> </element> <elemento class = "c" > </element> </element>? Através de $ ('. A .b.c') dá resultado errado.
Ipsita Rout
Neste exemplo, o seletor $('.a .c.b')também funcionaria?
Daniel W.
Sim, pois o pedido não importa.
Zim84
$('.a > element')
Alex
63

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')
John Slegers
fonte
38

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

user2298171
fonte
26

Apenas mencione outro caso com o elemento:

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

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

macio.Jun
fonte
26

Solução JavaScript Vanilla: -

document.querySelectorAll('.a.b')

Salman von Abbas
fonte
20

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.

Tejas Shah
fonte
9

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") 
Surya R Praveen
fonte
4

Você não precisa jQuerydisso

Em Vanillavocê pode fazer:

document.querySelectorAll('.a.b')
Sandwell
fonte
Verdadeira em 2018, mas não wnen esta pergunta foi feita em 2009
Michiel
3

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')
Savan
fonte
2

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 .

bahman parsamanesh
fonte
1

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

Karim Ali
fonte