Ruby on Rails 3 - jQuery 选择器不起作用([attribute~=value])

Question

我有很多这样的div

<div class="msg_header msg_header_for-219 media data-message="219">
...
</div>

我使用

$(".msg_header_for-<%= msg.id %>").css("background-color", "red");

以选择特定的 ID 并将其着色为红色。

我想将其余的div 涂成白色

所以我有 2 行

$("[class~='msg_header_for']").css("background-color", "white");
$(".msg_header_for-<%= msg.id %>").css("background-color", "red");

据我了解，第一个将选择类名中带有msg_header_for的任何类并将其设置为白色。 第二个将选择一个特定的并将其着色为红色。

红色部分有效。白色的没有。

我不明白为什么第一个选择器不起作用。怎么了？

Answer 1

来自 jQuery 文档：

[attribute~='value']选择具有 具有包含给定单词的值的指定属性， 由空格分隔。

所以你需要[attribute*='value']或寻找合适的那个。

Answer 2

据我了解，第一个将选择类名中带有msg_header_for的任何类

但是你的类名是msg_header_for-###其中###是一个数字，而不是msg_header_for。这不会选择带有数字的类名，因为它不是确切的类名，并且 ~= 属性选择器仅查找由空格分隔的标记，而不查找任何其他符号。换句话说，属性选择器[class~='msg_header_for']实际上等同于.msg_header_for（至少对于 HTML 类）。

如果需要按带前缀的类名进行选择，您应该能够改用它：

$("[class*='msg_header_for-']").css("background-color", "white");

对于更复杂的情况，您可以使用此答案中的另一个示例，但是如果您的标记是可预测的，那么您可能不需要如此复杂的选择器：

$("[class^='msg_header_for-'], [class*=' msg_header_for-']").css("background-color", "white");

Answer 3

来自： http://www.w3.org/TR/CSS2/selector.html#matching-attrs

[att~=val]

表示具有 att 属性的元素，其值是以空格分隔的单词列表，其中一个恰好是"val"。如果"val"包含空格，它将永远不会表示任何内容（因为单词由空格分隔）。如果"val"是空字符串，它也永远不会表示任何东西。

您可以做的是创建一个对所有类都是通用的类，然后选择该类。

<div class="msg_header msg_header_for-100"></div>

然后：

$(".msg_header").css("background-color", "white");
$(".msg_header_for-<%= msg.id %>").css("background-color", "red");