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.

— ajsie
fonte

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