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

Question

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

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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