Объединение селектора классов и селектора атрибутов с помощью 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 и документации, но, похоже, я не могу понять это. Может ли кто-нибудь помочь?

Ответ 1

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

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

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

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

Ответ 2

Думаю, вам просто нужно удалить пространство. то есть.

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

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

Ответ 3

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

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