jQuery: selecione a classe e o ID de um elemento ao mesmo tempo?

170

Eu tenho alguns links que quero selecionar classe e identificação ao mesmo tempo.

Isso ocorre porque eu tenho 2 comportamentos diferentes. Quando uma classe de links tem um nome de classe, eles se comportam de uma maneira, quando os mesmos clas de links têm outro nome de classe, eles se comportam de maneira diferente. Os nomes das classes são alternados com jquery.

Então, eu tenho que poder selecionar uma classe de links E id ao mesmo tempo. Isso é possível?

Eu tentei:

 $("a .save #country")

sem nenhum resultado.

jquery dom jquery-selectors css-selectors ajsie
fonte

Respostas:

305

Você pode fazer:

$("#country.save")...

OU

$("a#country.save")...

OU 

$("a.save#country")...

como preferir.

Portanto, sim, você pode especificar um seletor que corresponda ao ID e à classe (e potencialmente nome da tag e qualquer outra coisa que você queira incluir).

cleto
fonte
41
Então basicamente é como: $ ("# a .b") significa elemento com classe b dentro de elemento com id a. $ ("# ab") significa elemento com classe b e id a. O truque é o espaço entre #a e .B
Bhumi Singhal
13
Deve-se ter cuidado para usar o seletor de identificação antes da aula, caso contrário não funcionará. Exemplo: $ (". Save # country") ... não retorna resultados.
slotomo 14/05
43

Apenas para acrescentar que a resposta que Alex forneceu funcionou para mim, e não a que está destacada como resposta.

Este não funcionou para mim 

$('#country.save')

Mas este fez: 

$('#country .save')

então minha conclusão é usar o espaço. Agora não sei se é para a nova versão do jQuery que estou usando (1.5.1), mas espero que isso ajude a qualquer pessoa com um problema semelhante que já tive.

editar: O crédito total pela explicação (no comentário à resposta de Alex) vai para Felix Kling, que diz:

O espaço é o seletor descendente, ou seja, AB significa "Corresponder a todos os elementos que correspondem a B, que são descendentes de elementos que correspondem a A". AB significa "selecionar todos os elementos que correspondem a A e B". Então, realmente depende do que você deseja alcançar. #country.savee #country .savenão são equivalentes.

Nikola
fonte
2
O problema é que você disse "contador" em vez de "país"?
precisa saber é
8

Funcionará ao adicionar espaço entre o id e o identificador de classe

$("#countery .save")...

Alex
fonte
1
na verdade, isso funcionou para mim, pois não estava funcionando como $ ('# countery.save'), então obrigado!
Nikola
1
Descobri que às vezes é exigente quanto ao espaço. como $ (. selector> .item # id) funciona, mas $ (. selector> .item #id) não funciona.
Abe Petrillo
21
O espaço é o seletor descendente , ou seja, A Bsignifica "Corresponder a todos os elementos que correspondem a B, que são descendentes de elementos que correspondem a A". ABsignifica "selecionar todos os elementos que correspondem a A e B". Então, realmente depende do que você deseja alcançar. #countery.savee #countery .savenão são equivalentes.
Felix Kling
2

No final, aplicam-se as mesmas regras do CSS.

Então, acho que essa referência pode ser útil.

pegar
fonte
Você poderia resumir o conteúdo da sua referência?
krlmlr
Na verdade, de acordo com api.jquery.com/category/selectors, o jQuery possui alguns seletores próprios; Além disso, na verdade, não diz que todos os seletores de CSS 1-3 são suportados ...
SamB 19/10/12
@ SamB Você está certo, mas diz que empresta CSS 1-3 e acrescenta o seu próprio. Ainda acho que o link para o material do W3C é válido para esta discussão.
akousmata
2

E esse código?

$("a.save#country")
Pekka
fonte
1 
$("a.save, #country")

selecionará a classe "a.save" e o ID do "país".

okw
fonte