Łączenie selektora klasy i selektora atrybutu z jQuery

Czy jest możliwe połączenie selektora klasy i selektora atrybutów z jQuery?

Na przykład biorąc pod uwagę następujący kod 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>

Jaki byłby selektor, którego mogę użyć do wybrania tylko wierszy 1 i 3?

Próbowałem:

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

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

Jestem pewien, że odpowiedź jest bardzo prosta i próbowałem przeszukać fora i dokumentację jQuery, ale nie mogę tego rozgryźć. Czy ktoś może pomóc?

Połącz je. Dosłownie połącz je; połącz je ze sobą bez znaków interpunkcyjnych.

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

Twój pierwszy selektor szuka elementów o wartości atrybutu, zawartych w elementach z klasą.
Przestrzeń jest interpretowana jako selektor potomków .

Twój drugi selektor, tak jak powiedziałeś, szuka elementów z wartością atrybutu, klasą lub obydwoma.
Przecinek jest interpretowany jako operator selektora wielokrotnego - cokolwiek to znaczy (selektory CSS nie mają pojęcia „operatorów”; przecinek jest prawdopodobnie dokładniej nazywany separatorem).

Myślę, że wystarczy usunąć spację. to znaczy

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

Tutaj jest skrzypce http://jsfiddle.net/xXEHY/

Ten kod też działa:

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

To również zadziała:

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