0

我有很多这样的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 的任何类并将其设为白色。第二个将选择一个特定的并将其涂成红色。

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

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

4

3 回答 3

4

来自 jQuery 文档：

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

因此，您需要[attribute*='value']或寻找合适的。

于 2013-01-26T10:01:24.093 回答
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");

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

$("[class^='msg_header_for-'], [class*=' msg_header_for-']").css("background-color", "white");
于 2013-01-26T10:03:19.700 回答
1

来自：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");
于 2013-01-26T10:03:16.557 回答