将类选择器和属性选择器与 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 论坛和文档，但似乎无法找到这个问题的答案。有人能帮忙吗？

161062

小开

最佳答案

把它们组合在一起。字面上是合并它们; 接上它们在一起没有任何标点符号。

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

第一个选择器查找具有属性值的元素，该属性值包含在具有类的元素中。
该空间被解释为后代选择器。

第二个选择器，如您所说，查找具有属性值、类或两者兼有的元素。
逗号被解释为多重选择器多重选择器操作符ーー不管这是什么意思(CSS 选择器没有“操作符”的概念; 逗号可能更准确地称为分隔符)。

小开

我认为你只需要移除空间。

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

这里有把小提琴

小开

这个代码也有效:

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

小开

这也会奏效:

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