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
source

150

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

$("#my_id .my_class")

— Arun P Johny
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
source

12

Toujours utiliser

//Super Fast
$('#my_id').find('.my_class');

au lieu de

// Fast:
$('#my_id .my_class');

Jetez un œil aux règles de performance JQuery .

Aussi chez Jquery Doc

— Niks Jain
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
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
source