Объединение селектора класса и селектора атрибута с jQuery

Можно ли объединить оба селектор класса и селектор атрибута с JQuery?

Например, с учетом следующего 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>

Какой селектор я могу использовать, чтобы выбрать только строки 1 и 3?

Я пытался:

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

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

Я уверен, что ответ очень прост, и я пробовал искать форумы и документацию jQuery, но я не могу понять это. Кто-нибудь может помочь?

Объедините их. Буквально объединить их; соедините их вместе без знаков препинания.

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

Ваш первый селектор ищет элементы со значением атрибута, содержащиеся в элементах с классом.
Пространство интерпретируется как селектор потомков .

Ваш второй селектор, как вы сказали, ищет элементы либо со значением атрибута, либо с классом, либо с обоими.
Запятая интерпретируется как оператор множественного выбора - что бы это ни значило (CSS-селекторы не имеют понятия «операторы»; запятая, вероятно, более точно называется разделителем).

Я думаю, вам просто нужно убрать место. т.е.

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

Здесь есть скрипка http://jsfiddle.net/xXEHY/

Этот код тоже работает:

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

Это также будет работать:

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