jQuery combinant un sélecteur de classe et un sélecteur d'attribut

Question

une question simple pour vous de jQuery gourous. Est-il possible de combiner à la fois un sélecteur de classe et et un sélecteur d'attributs?

c'est à dire donné le code html suivant:

<TABLE>
  <TR class="myclass" reference="12345"><TD>Row 1</TD></TR>
  <TR class="otherclass" reference="12345"><TD>Row 2</TD></TR>
  <TR class="myclass" reference="12345"><TD>Row 3</TD></TR>
  <TR class="myclass" reference="54321"><TD>Row 4</TD></TR>
</TABLE>

Quel serait le sélecteur que je peux utiliser pour sélectionner la ligne 1 et 3 seulement ?

J'ai essayé:

$(".myclass [reference=12345]") - ne renvoie rien

$(".myclass, [reference=12345]") - renvoie tous les 4 rangs (oui je sais la virgule signifie ou)

Je suis sûr que la réponse est très simple et j'ai essayé de chercher le jQuery, des forums et de la documentation mais je n'arrive pas à comprendre ça. Toutes les pensées seraient grandement appréciés.

Answer 1

De les combiner. Comme, littéralement, se combinent entre eux. Attachez - les ensemble.

$('.myclass[reference="12345"]')

Votre premier sélecteur regarde pour les éléments avec la valeur de l'attribut contenues dans les éléments avec la classe.
L'espace est interprété comme le sélecteur de descendant.

Votre deuxième sélecteur, comme vous l'avez dit, regarde pour les éléments avec soit la valeur de l'attribut ou de la classe, ou les deux.
La virgule est interprété comme le sélecteur de plusieurs opérateur.

Answer 2

Je pense que vous avez juste besoin de supprimer l'espace. c'est à dire

$(".myclass[reference=12345]").css('border', '#000 solid 1px');

Il y a un violon ici http://jsfiddle.net/xXEHY/

Answer 3

Ce code fonctionne aussi:

$("input[reference=12345].myclass").css('border', '#000 solid 1px');