【问题标题】：Using JQuery removeClass() to remove all classes but one使用 JQuery removeClass() 删除除一个以外的所有类
【发布时间】：2015-03-25 23:12:02
【问题描述】：

好的，我有一个有趣的（嗯，对我来说很有趣，无论如何:)）。

我有一种情况，我有一个具有静态类值的 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

【问题讨论】：

staticClass 是事先知道的，还是我们必须先处理类名？
试试这个：stackoverflow.com/questions/3452778/jquery-change-class-name
请注意，用“头等舱”和“其他舱位”来思考有点离题；元素的集合中的类没有顺序。
删除所有类并重新分配该特定类确实是最“优雅”的方式。 jQuery 没有为这些方法提供任何 pattern 匹配项。
Álvaro - 好吧，这个类被用作选择器，所以它是已知的，但理想情况下，它不会是硬编码的，这样它就可以更容易地重用。可能作为函数的第二个参数传入。

标签： javascript jquery jquery-selectors removeclass

【解决方案1】：

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

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

不带参数调用removeClass() 会删除所有类。

如果你不想这样做，那么你可以简单地修改类属性：

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

【讨论】：

酷，但是这家伙无论如何都想到了（看@问题的结尾）
@dinchev 我猜我应该阅读这些问题直到最后。我更新了一个不同的建议。
此方法不允许尚未添加“staticClass”的元素在可能不是您的意图时不添加它。也就是说<div class="someClass">会变成<div class="staticClass">，但是为了真正的删除除指定类之外的所有类的概念，这个例子中的结果应该是<div class="">。将 RegEx 替换函数传递给 .removeClass() 允许所选元素保留指定的类（如果有），但删除尚未具有指定类的元素的所有类。

【解决方案2】：

你可以传递一个函数来移除类，它会返回除静态类之外的所有类：

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

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

【讨论】：

这有两个问题。首先，如果在匹配的字符串之后有任何 class / word，它将不会创建 space，其次，它也会匹配 @ 987654322@.
@jAndy 你对比赛的看法是对的，但对空间的创造却是错误的。返回值被传递给 removeClass，在那里 jQuery 接管并分配新值。
这是我想我一直在寻找的东西，但 jAndy 提出了必须处理返回组中静态类的放置的好点。
@talemyn jQuery 确实接管了返回值并将其传递给removeClass。该函数只替换字符串中的静态值，因此确保 jquery 只删除返回字符串中的类。
仅供参考 - 虽然 .attr('class', '<final list of classes>') 方法可能是处理特定情况的最有效方法，但这个答案确实解决了我正在寻找的问题，这是一种使用 removeClass() 排除类的方法。感谢大家的投入。

【解决方案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>') 中那样将现有类替换为其他类时，此方法是必需的，而只是想删除那些与类列表不匹配的类。

【讨论】：

相反——如果你只想删除匹配列表的类：$('span').removeClass('hello world');

【解决方案4】：

您可以使用.attr() 函数设置它所需的类。所以：

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

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

【讨论】：

【解决方案5】：

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

这一切都意味着如果你打电话

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

element.className 无论如何都会被替换，但包含了新的类。（这意味着您的staticClass 实际被触动了:)

当你打电话时

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

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

【讨论】：

我想我对在这里使用默认的“removeClass”的担忧是当静态类未分配给 div 时的额外间隔（无论多么短暂），这意味着与它相关的任何样式都将消失。但我明白你关于使用“addClass”时如何始终“触摸”静态类的观点。

将函数传递给.removeClass()

Beat Richartz 在此页面上的答案的修订版。

将函数传递给`.removeClass()`