将类选择器和属性选择器与 jQuery 结合使用

javascript jquery jquery-selectors

2022-08-30 01:48:06

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

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

您的第二个选择器，就像您说的，查找具有属性值和/或类的元素。
逗号被解释为多重选择器运算符 - 无论这意味着什么（CSS选择器没有“运算符”的概念;逗号可能更准确地称为分隔符）。

答案 2

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

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

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