使用JQuery removeClass（）删除除一个之外的所有类

Question

好的，我有一个有趣的（好吧，对我来说很有趣，反正:) :)。

我遇到的情况是我有一个带有静态类值的div，但它也可以分配一个动态的“辅助类”。当用户进行选择时，需要删除任何现有的辅助类并添加新类。

忽略使用id值（项目的标准使用类...无法更改），是否有一种优雅的方法可以简单地忽略第一个类并删除其他任何类，然后添加新的类？

启动HTML示例：

<div class="staticClass dynaClass1" />

示例JS：

function updateClass(newSecondaryClass) {
    $(".staticClass") . . . **** remove any class besides "staticClass" ****
    $(".staticClass").addClass(newSecondaryClass);
}

如果使用updateClass("dynaClass2");调用该函数，则生成的HTML应为：

<div class="staticClass dynaClass2" />

我可以想到这样做的方法，只需使用removeClass();删除所有类，并在添加新类时添加“staticClass”，或者使用attr("class", "staticClass " + newSecondaryClass);，但我想知道是否存在是不是一种处理它而不必触及静态类的方法？

最后，我想这是一个学术问题，比什么都重要。 。 。看起来它应该是可行的，但我不知道该怎么做。 ：d

Answer 1

您可以删除所有课程并添加您要离开的课程：

$(".staticClass").removeClass().addClass('staticClass');

在没有参数的情况下调用removeClass()会删除所有类。

如果您不想这样做，那么您只需修改类属性：

$(".staticClass").attr('class', 'staticClass');

Answer 2

您可以传递一个函数来删除class，它返回除静态类之外的所有类：

$('.staticClass').removeClass(function(index, klass) { 
  return klass.replace(/(^|\s)+staticClass\s+/, ''); 
})

这将返回对象上的所有类，而不返回静态类，因此删除除静态类之外的所有类。

Answer 3

将函数传递给.removeClass()

本页回复了Beat Richartz的答案。

注意：我尝试将其作为编辑发布，但遭到拒绝。这个概念是相同的，具有改进的RegEx。

改进的RegEx提供了与多个类的字边界匹配

// Remove all classes except those specified
$('span').removeClass(function () { 
    return $(this).attr('class').replace(/\b(?:hello|world)\b\s*/g, ''); 
});

之前：

<span class="hello foo">hello</span> <span class="world bar">world</span>`

后：

<span class="hello">hello</span> <span class="world">world</span>`

试一试： http://jsfiddle.net/gfullam/52eeK/3/

尝试将其作为jQuery插件： http://jsfiddle.net/gfullam/52eeK/5/

FWIW：如果您不希望将现有类替换为.attr('class', '<final list of classes>')中的其他类，则此方法是必需的，而只是想要删除那些与“{1}}”不匹配的类。类。

Answer 4

您可以使用.attr()功能设置所需的类。所以：

$('.staticClass').attr('class','<any classes required');

这将替换原来的所有类，并添加新的类。

Answer 5

所有类都是通过调用Javascript DOM element.className来操作的，所以基本上jQuery的addClass只是替换了那个字符串。您可以在Github source。

中看到

如果你打电话

，这意味着什么

$('.staticClass').addClass('someClass');

无论如何都会替换element.className，但包含新类。 （这意味着您的staticClass实际上已被触及：）

致电时

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

你将两次替换该字符串，这样做没有问题。