Combinazione di un selettore di classe e un selettore di attributi con jQuery

È possibile combinare un selettore di classe e un selettore di attributi con jQuery?

Ad esempio, dato il seguente HTML:

<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>

Quale sarebbe il selettore che posso usare per selezionare solo le righe 1 e 3?

Ho provato:

$(".myclass [reference=12345]") // returns nothing

$(".myclass, [reference=12345]") // returns all 4 rows (yes, I know the comma means 'or')

Sono sicuro che la risposta è molto semplice e ho provato a cercare nei forum e nella documentazione di jQuery ma non riesco a capirlo. Qualcuno può aiutare?

Combinali. Letteralmente combinare loro; attaccarli insieme senza punteggiatura.

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

Il tuo primo selettore cerca elementi con il valore dell'attributo, contenuti in elementi con la classe.
Lo spazio viene interpretato come il selettore discendente .

Il secondo selettore, come hai detto, cerca elementi con il valore dell'attributo, la classe o entrambi.
La virgola viene interpretata come l' operatore di selezione multipla , qualunque cosa significhi (i selettori CSS non hanno una nozione di "operatori"; la virgola è probabilmente conosciuta con più precisione come delimitatore).

Penso che devi solo rimuovere lo spazio. vale a dire

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

C'è un violino qui http://jsfiddle.net/xXEHY/

Anche questo codice funziona:

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

Questo funzionerà anche:

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