jquery, sélecteur de classe dans id

91

Ci-dessous, comment dois-je sélectionner les éléments qui contiennent la classe my_classdans l'élément avecid = "my_id" ?

Notez que l'élément peut également avoir une autre classe, pour laquelle je ne sélectionne pas.

<div id = "my_id">
    <span class = "my_class hidden">hi</span>
    <span class = "my_class">hello</span>
</div>

essayait

$("#my_id [class*=my_class ]")
jquery user984003
la source

Réponses:

150

Vous pouvez utiliser le sélecteur de classe avec le sélecteur descendant

$("#my_id .my_class")
Arun P Johny
la source
Puis-je combiner cela avec: first (pour obtenir le premier élément de cette classe dans #my_id)?
jakob.j
1
@ jakob.j$("#my_id .my_class:first")
Arun P Johny
Puis-je utiliser la même chose pour la classe que id comme $ (". My_class #my_id") quand id est défini dans la classe
dhS
48

Utilisez simplement le sélecteur de classe classique.

$('#my_id .my_class')

Peu importe si l'élément a également d'autres classes. Il a la classe .my_class , et il est quelque part dans #my_id , donc il correspondra à ce sélecteur.

Concernant les performances

Selon la documentation sur les performances du sélecteur jQuery , il est plus rapide d'utiliser les deux sélecteurs séparément, comme ceci:

$('#my_id').find('.my_class')

Voici la partie pertinente de la documentation:

Sélecteurs basés sur l'ID

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

L' .find()approche est plus rapide car la première sélection est gérée sans passer par le moteur de sélection Sizzle - les sélections ID uniquement sont gérées à l'aide document.getElementById(), ce qui est extrêmement rapide car il est natif du navigateur.

La sélection par ID ou par classe seule (entre autres) appelle des fonctions fournies par le navigateur comme celles document.getElementById()qui sont assez rapides, tandis que l'utilisation d'un sélecteur descendant appelle le moteur Sizzle comme mentionné qui, bien que rapide, est plus lent que l'alternative suggérée.

sosie
la source
1

Je pense que vous demandez de ne sélectionner que <span class = "my_class">hello</span>cet élément, vous avez fait comme ça, si je comprends bien votre question, c'est la réponse,

$("#my_id [class='my_class']").addClass('test');

DEMO

Thirumalai murugan
la source
$("#my_id .my_class")est l'équivalent le plus court; vous ne gagnez rien à utiliser le sélecteur d'attribut dans ce cas.
doppelgreener
J'espère que cela a également fait le même travail que votre réponse, pendant que je réponds à la question à laquelle vous avez répondu, je n'ai pas remarqué que depuis que j'ai fait la réponse, je n'ai pas supprimé la question.
Thirumalai murugan
1

Est également $( "#container" ).find( "div.robotarm" );
égal à:$( "div.robotarm", "#container" )

Pacha Oleynik
la source