使用 jQuery 组合类选择器和属性选择器

Posted 2023-03-05

【中文标题】使用 jQuery 组合类选择器和属性选择器

【英文标题】：Combining a class selector and an attribute selector with jQuery

【发布时间】：2011-09-08 22:54:51

【问题描述】：

是否可以将类选择器和属性选择器与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"]')

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

正如您所说，您的第二个选择器查找具有属性值或类或两者的元素。 逗号被解释为multiple selector 运算符——不管这意味着什么（CSS 选择器没有“运算符”的概念；逗号可能更准确地称为分隔符）。

【讨论】：

我也可以合并 id 吗？我的意思是这样的：$('.myclass[myid="6"]')

【参考方案2】：

我认为你只需要删除空间。即

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

这里有一个小提琴http://jsfiddle.net/xXEHY/

【参考方案3】：

此代码也有效：

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

【参考方案4】：

这也可以：

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