Comment puis-je sélectionner un élément avec une classe dans une DIV?

142

J'ai le code HTML suivant:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Je souhaite pouvoir utiliser un sélecteur qui sélectionne l'intérieur div, mais spécifique au mydivconteneur. Comment puis-je y parvenir avec jQuery?

— Idan Shechter
source

285

Essayer:

$('#mydiv').find('.myclass');

Démo de JS Fiddle .

Ou:

$('.myclass','#mydiv');

Démo de JS Fiddle .

Ou:

$('#mydiv .myclass');

Démo de JS Fiddle .

Références:

Bon à apprendre de la find()documentation:

Les méthodes .find () et .children () sont similaires, sauf que cette dernière ne parcourt qu'un seul niveau dans l'arborescence DOM.

— David dit de réintégrer Monica
source

2

les deux secondes ne fonctionneront pas, mais trouver est OK. Le deuxième sélectionnera chaque classe = myclass et sélectionnera chaque id = mydiv) je pense.

— czupe

2

@czupe: non, alors que l'approche du sélecteur de contexte est écrite différemment, jQuery implémente, en interne, la même $('#mydiv').find('.myclass');approche que celle utilisée dans le premier extrait de code. Soit dit en passant: «... sélectionner tous id=mydiv»? Il ne devrait jamais y avoir qu'une seule utilisation d'un donné iddans une page (un id doit être unique dans le document ).

— David dit de réintégrer Monica le

@DavidThomas Eh bien, j'ai juste essayé $ ('# mydiv .myclass'); et cela a fini par sélectionner toutes les divs qui ont la classe myclass plutôt que juste les divs dans mydiv.

— user3281466

@ user3281466: vraiment? Cela semble peu probable, pouvez-vous reproduire votre problème ?

— David dit de réintégrer Monica le

comment vérifier quoi que ce soit à div puis le mettre dans: not ()

— SuperUberDuper

20

Essaye ça

$("#mydiv div.myclass")

— ShankarSangoli
source

Ou si vous ne vous souciez pas de savoir si c'est un div(ou si ce sera toujours un div), vous pouvez simplifier en $ ("# mydiv .myclass").

— Michael Mior

@Michael - Oui, nous pouvons simplement dire .mycalss mais si nous savons que c'est un div, div.myclass accélérera la recherche.

— ShankarSangoli

@Shankar, cela ne le rendra probablement pas plus rapide, plutôt plus lent. en supposant que jquery utilise sizzle et non un natif, document.queryselectorallil recherchera probablement de la même manière et, dans votre cas, effectuera une vérification supplémentaire . Il est possible que les implémentations natives fassent de même.

— davin

Certains tests rapides que j'ai effectués suggèrent que cela dépend du navigateur. Il est apparu légèrement plus rapide dans Chrome et légèrement plus lent dans FF. Quoi qu'il en soit, à moins que vous n'exécutiez ce sélecteur plusieurs fois ou sur un grand nombre d'éléments, la différence est probablement négligeable. Voir ici pour mon test brut (et peut-être défectueux).

— Michael Mior

@Michael - Si nous spécifions le tagname avec le nom de la classe, il utilisera d'abord getElementsByTagName, puis cherchera le nom de la classe qui sera définitivement plus rapide et toujours en utilisant la méthode native pour faire le tri de premier niveau. De toute façon, il est négligeable s'il n'y a pas beaucoup d'éléments à sélectionner.

— ShankarSangoli

11

Vous le ferez de la même manière que vous appliqueriez un sélecteur css. Pour l'instant tu peux faire

$("#mydiv > .myclass")

ou

$("#mydiv .myclass")

Le dernier correspondra à chaque myclass dans myDiv, y compris myclass dans myclass.

— Leandro Galluppi
source

6

Si vous souhaitez sélectionner chaque élément qui a l'attribut de classe "myclass", utilisez

$('#mydiv .myclass');

Si vous souhaitez sélectionner uniquement les éléments div qui ont l'attribut de classe "myclass", utilisez

$("div#mydiv div.myclass");

en savoir plus sur les sélecteurs jquery consulter ces articles

— e11438
source

1

essayez plutôt ceci $(".video-divs.focused"). Cela fonctionne si vous recherchez des divs vidéo focalisés.

— user3749775
source