Поєднання вибору класу та селектора атрибутів з 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');