将类选择器和属性选择器与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');