jquery - 如何从元素中删除所有未命名为“消息”的类？

Question

我有以下内容：

<div id="abc">
</div>

在该 div 内只能有以下内容之一：

<p class="message">
<p class="message error"></p>
<p class="message warning"></p>
<p class="message success"></p>
<p class="message loading"></p>

<p>有没有一种方法可以让我只从不是“消息”的元素中找到并删除类。我意识到我可以删除所有内容，然后使用 .removeClass() 添加我需要的内容，但这对我不起作用，因为在我之前添加了消息类之后，我做了一些 CSS 更改，如果我删除所有内容然后添加，这些将丢失再次是消息类。

score 2 · Accepted Answer

只需将类设置为"message". 它不会比简单地做更简单或更有意义。无需在此处添加或删除或过滤或以其他方式操作类。

$('#abc .message').attr("class", "message");

这似乎也符合您的标准，因为它不会“全部删除”，它只是将类设置为"message". message在任何时候都不会从元素中删除该类。

score 1 · Accepted Answer

你可以这样做：

$('.message').removeClass().addClass('message');

您注意到您已经考虑过这种方法，但认为以前的 CSS 操作将被删除，但您错了 - 使用 javascript 完成的 CSS 操作直接应用于元素（通过style属性/属性），因此它们不会被删除.

此外，由于只有四个其他类可以附加（在您的示例中），您总是可以这样做：

$('.message').removeClass('error warning success loading');

score 1 · Accepted Answer

如果您知道要删除的类名，可以试试这个

$('p').removeClass('error warning success loading')

score 0 · Accepted Answer

该.removeClass()方法可以采用一个回调函数，该函数接收当前类列表作为参数，并且应该返回要删除的类，因此您可以对以下内容进行一些变体：

var classToKeep = "message";    
$("#abc p").removeClass(function(i,c) {
    return c.replace(new RegExp("\\b" + classToKeep + "\\b"), "");
});

我认为 meagar 和 ahren 的答案提供了更好的解决方案，但是由于您特别询问了如何删除除一个之外的所有类...

4 回答 4