Sélecteurs JQuery: Comment sélectionner un élément avec la classe spécifique *et* id

Je suis en train de sélectionner un élément HTML sur ma page, qui dispose d'une classe spécifique et ID. Voici le tag:

<div class="statusLight" id="green"></div>

J'ai essayé cela avec pas de chance:

$statusLight = $('.statusLight#green');

Je sais que je pourrais tout simplement dire

$statusLight = $('#green');

Mais j'essayais de trouver un moyen de le sélectionner en fonction de sa classe. Toute aide serait appréciée.

Pourquoi voulez-vous sélectionner par catégorie, si vous connaissez l'ID? De par leur conception, les ID sont uniques, donc ce serait le moyen le plus rapide pour sélectionner un élément.
Je ne comprends pas. L'id doit être UNIQUE et à la fin tout le filtrage. L'application de rien + id doit être exactement la même que la sélection des quelques par ID. Pourquoi voudriez-vous jamais eu envie de faire cela?
En tout cas, je suis sûr que jQuery s'arrête lorsqu'il trouve la première occurrence d'un sélecteur avec un ID, faire de la différenciation des classes de Id en double impossible.
Une des raisons pour cela est peut-être que la classe de l'élément change et qu'il veut sélectionner l'élément seulement quand il a donné à la classe. (Ok, juste deviner, mais le point est qu'il y a peut être une raison pour cela).
"Je suis sûr que jQuery s'arrête lorsqu'il trouve la première occurrence d'un sélecteur avec un ID" -- j'espère et je crois que ce n'est pas vrai, car cela irait à l'encontre du point de sélecteur CSS -- toutes les parties du sélecteur match, pas seulement de l'ID. Que faire si vous êtes uniquement intéressé par élément donné quand il a une certaine classe? Votre optimisation de casser ce comportement.

OriginalL'auteur BAHDev | 2010-01-07

  1. 18

    Les deux #green.statusLight et .statusLight#green sont valables sélecteurs et doit sélectionner l'élément que vous recherchez. Première sera plus rapide si.

    Êtes-vous à l'aide de $(...) après votre document est chargé, c'est à dire à partir de $(document).ready(function() { ... }) ou en plaçant votre script après votre élément?

    Merci Pierre pour la réponse rapide. Il en fait a fini par être une faute de frappe avec la "Lumière" au lieu de "lumière". Les deux méthodes que vous avez donné a fini de travailler.

    OriginalL'auteur Peter Štibraný

  2. 11

    Je ne suis pas entièrement sûr de savoir pourquoi vous voulez le faire.

    Un ID doit être unique, et, par conséquent, lorsque vous la sélectionnez, il n'y a pas de raison de la spécialisation. Si non, alors vous avez besoin de modifier votre code HTML.

    Ce scénario n'a de sens que si vous étiez à la combinaison d'un sélecteur de classe avec un sélecteur d'élément, par exemple

    $("div.statuslight")

    Mais dans votre exemple, il ya juste pas de point, que vous avez une ID de toute façon!

    James, je suis d'accord avec vous. Vraiment plus de lisibilité chose dans mon code, mais vous avez raison.. tous les Id sont uniques, de toute façon, alors pourquoi filtrer davantage? Mon problème a fini par être une faute de frappe par la voie..
    Il y a le cas où vous voulez le faire événement délégation sur un élément seulement quand il a une classe. Disons que vous avez un drag'n'drop élément et vous ne voulez qu'il soit cliquable quand il a été donné une certaine classe (via une sorte d'interaction).

    OriginalL'auteur James Wiseman

  3. 3

    Pourquoi auriez-vous besoin de sélectionner sur la classe? Id doit être unique donc, l'ajout de la classe qui ne serait pas vous acheter quoi que ce soit. Si vous venez d'utiliser l'ID c'est plus efficace, parce que jQuery est possible d'utiliser le natif getElementByID qui est toujours le plus rapide. Gardez vos requêtes simple quand on peut.

    Je suis d'accord. C'est plus une lisibilité chose dans mon code, plutôt que d'un besoin fonctionnel. Merci pour les conseils.
    Une des raisons pour cela est peut-être que la classe de l'élément change et qu'il veut sélectionner l'élément seulement quand il a donné à la classe. (Ok, juste deviner, mais le point est qu'il y a peut être une raison pour cela). [répéter les même commentaire que ci-dessus]

    OriginalL'auteur Parrots

  4. 3

    $(".class#id") ou $("#id.class") à la fois travailler.

    Tous les commentaires à cette question est qu'il n'y a pas de raison de le faire... il n'y a pas de "meilleures pratiques" des raisons de le faire avec un programme bien conçu, mais dans le monde réel, la plupart d'entre nous travaillent dans des entreprises qui ont des bases de code qui ne sont pas très bien organisés et si vous travaillez sur un grand 10000+ fichier de programme, vous pourriez ne pas vouloir remplacer un non descriptif id et par l'ajout d'une classe pour le sélecteur, vous pouvez aider les autres codeurs de comprendre d'où l'id est venu.

    Cas au point, je travaille sur un projet où nous avons conteneur DIVs qui créent des "widgets" sur la page... ces "widgets" un identifiant numérique à partir de la base de données, nous avons donc fin avec <div id="12345" class="widget">

    Quelqu'un d'autre codé de l'ambiguïté de l'id d'un long temps avant, j'ai travaillé ici... mais il reste. Quand j'écris JQuery, je préfère ne pas faire plus d'un mélange confus de code... donc au lieu de $("#12345") je pourrait préférer $(".widget#12345") de sorte que quelqu'un n'a pas à passer une demi-heure à essayer de comprendre que le 12345 id dans ce scénario est pour un widget.

    Ainsi, alors que $("#12345") et $(".widget#12345") sélectionnez la même chose... ça rend le code beaucoup plus lisible pour mes collègues et c'est plus important qu'une fraction de seconde dans l'amélioration de la vitesse pour le javascript.

    En effet! Un autre cas d'utilisation, je suis en utilisant des caractères génériques dans mon sélecteur d'ID [id^=lightbox_flex_field_flex_field_] et la nécessité d'obtenir de la classe aussi, dans certains cas, à se différencier, puisque les utilisateurs peuvent définir des types de champs eux-mêmes...

    OriginalL'auteur user1610157

  5. 0

    Une autre raison que vous auriez probablement ce faire est si vous avez mis en cache le code générique à la recherche d'un code spécifique, mais vous ne voulez l'activer lorsque vous avez un style spécifique attribué. Surtout quand le rendu scafolded MVC articles où IDs peuvent être dans certains points de vue, mais vous ne voulez pas avoir des mesures prises, par exemple... "hidden" id des champs, mais dans d'autres points de vue il peut être recherche les valeurs dans une liste déroulante et un Select2 addin affecté...

    OriginalL'auteur Brian Kirkpatrick

  6. 0

    La façon la plus simple est:

    $('.statusLight[id=green]');

    Que l'id est un attribut, vous pouvez utiliser le sélecteur d'attributs

    OriginalL'auteur Thermech

  7. 0

    Juste un suivi pour info:

    Si vous êtes à la recherche pour faire référence à un id et sous-catégorie (par exemple, le vert statusLight mais pas le bleu):

    <div id="green">
    <div class="statusLight"></div>
</div>

<div id="blue">
    <div class="statusLight"></div>
</div>

    Ensuite, vous devez ajouter un espace $("#green .statusLight")

    OriginalL'auteur Angus Walker