jQuery: sélectionner la classe et l'identifiant d'un élément en même temps?

170

J'ai quelques liens que je veux sélectionner la classe et l'identifiant en même temps.

C'est parce que j'ai 2 comportements différents. Quand une classe de liens a un nom de classe, ils se comportent d'une manière, lorsque la même classe de liens a un autre nom de classe, ils se comportent différemment. Les noms de classe sont switch avec jquery.

Je dois donc pouvoir sélectionner une classe de liens ET un identifiant en même temps. Est-ce possible?

J'ai essayé:

 $("a .save #country")

sans aucun résultat.

— Ajsie
source

305

Tu peux faire:

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

OU

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

OU

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

comme tu préfère.

Donc oui, vous pouvez spécifier un sélecteur qui doit correspondre à l'ID et à la classe (et éventuellement au nom de la balise et à tout ce que vous souhaitez ajouter).

— cletus
source

41

Donc, fondamentalement, c'est comme: $ ("# a .b") signifie élément avec la classe b à l'intérieur de l'élément avec id a. $ ("# ab") signifie élément avec la classe b et l'id a. L'astuce est l'espace entre #a et .b

— Bhumi Singhal

13

Vous devez faire attention à utiliser le sélecteur d'id avant la classe, sinon cela ne fonctionne pas. Exemple: $ (". Save # country") ... ne renvoie pas de résultats.

— slotomo

43

Juste pour ajouter que la réponse fournie par Alex a fonctionné pour moi, et non celle qui est mise en évidence comme réponse.

Celui-ci n'a pas fonctionné pour moi

$('#country.save')

Mais celui-ci a fait:

$('#country .save')

donc ma conclusion est d'utiliser l'espace. Maintenant, je ne sais pas si c'est à la nouvelle version de jQuery que j'utilise (1.5.1), mais j'espère de toute façon que cela aidera toute personne ayant un problème similaire que j'ai eu.

edit: Le mérite de l'explication (dans le commentaire de la réponse d'Alex) revient à Felix Kling qui dit:

L'espace est le sélecteur descendant, c'est-à-dire que AB signifie "Correspond à tous les éléments qui correspondent à B qui sont un descendant des éléments correspondant à A". AB signifie "sélectionner tous les éléments qui correspondent à A et B". Cela dépend donc vraiment de ce que vous voulez réaliser. #country.saveet #country .savene sont pas équivalents.

— Nikola
source

2

Est-ce que le problème est que vous avez dit «contre» au lieu de «pays»?

— amindfv

8

Cela fonctionnera lors de l'ajout d'espace entre l'identifiant et l'identifiant de classe

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

— Alex
source

1

en fait, cela a fonctionné pour moi, car cela ne fonctionnait pas comme $ ('# countery.save') alors merci!

— Nikola

1

J'ai parfois trouvé que l'espace était difficile. comme $ (. selector> .item # id) fonctionne, mais $ (. selector> .item #id) ne fonctionne pas.

— Abe Petrillo

21

L'espace est le sélecteur descendant , c'est-à-dire A Bsignifie "Correspond à tous les éléments qui correspondent à B qui sont un descendant des éléments correspondant à A". ABsignifie "sélectionner tous les éléments qui correspondent à A et B". Cela dépend donc vraiment de ce que vous voulez réaliser. #countery.saveet #countery .savene sont pas équivalents.

— Felix Kling

2

En fin de compte, les mêmes règles que pour le CSS s'appliquent.

Je pense donc que cette référence pourrait être d'une certaine utilité.

— getack
source

Pourriez-vous résumer le contenu de votre référence?

— krlmlr

En fait, selon api.jquery.com/category/selectors, jQuery a ses propres sélecteurs; aussi, il ne dit pas réellement que tous les sélecteurs CSS 1-3 sont pris en charge ...

— SamB

@SamB Vous avez raison, mais cela dit qu'il emprunte à CSS 1-3 ET ajoute le sien. Je pense toujours que le lien vers le contenu du W3C est valable pour cette discussion.

— akousmata

2

Et ce code?

$("a.save#country")

— Pekka
source

1

$("a.save, #country")

sélectionnera à la fois la classe «a.save» et l'ID «country».

— okw
source