Combinaison d'un sélecteur de classe et d'un sélecteur d'attribut avec jQuery
Est-il possible de combiner un sélecteur de classe et un sélecteur d'attribut avec jQuery?
Par exemple, étant 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 sélecteur pourrais-je utiliser pour sélectionner les lignes 1 et 3 uniquement?
J'ai essayé:
$(".myclass [reference=12345]") // returns nothing
$(".myclass, [reference=12345]") // returns all 4 rows (yes, I know the comma means 'or')
Je suis sûr que la réponse est très simple et j'ai essayé de chercher dans les forums jQuery et la documentation, mais je n'arrive pas à comprendre. Quelqu'un peut-il aider?
Combinez-les. Littéralement les combiner ; attachez ensemble sans aucune ponctuation.
$('.myclass[reference="12345"]')
Votre premier sélecteur recherche les éléments avec la valeur d'attribut, contenus dans les éléments avec la classe.
L’espace est interprété comme sélecteur de descendant .
Comme vous l'avez dit, votre second sélecteur recherche les éléments avec la valeur d'attribut, ou la classe, ou les deux.
La virgule est interprétée comme l’opérateur sélecteur multiple - quoi que cela signifie (les sélecteurs CSS n’ont pas la notion d ’" opérateurs "; la virgule est probablement plus précisément appelée délimiteur). ).
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/
Ce code fonctionne aussi:
$("input[reference=12345].myclass").css('border', '#000 solid 1px');
Cela fonctionnera également:
$(".myclass[reference='12345']").css('border', '#000 solid 1px');