删除除一个之外的所有类答案

【问题标题】：Remove all classes except one删除除一个之外的所有类
【发布时间】：2011-03-19 16:26:22
【问题描述】：

好吧，我知道通过一些 jQuery 动作，我们可以为特定的 div 添加很多类：

<div class="cleanstate"></div>

假设通过一些点击和其他操作，div 获得了很多类

<div class="cleanstate bgred paddingleft allcaptions ..."></div>

那么，我怎样才能删除除一个之外的所有类？我想出的唯一想法是：

$('#container div.cleanstate').removeClass().addClass('cleanstate');

虽然removeClass() 杀死了所有类，但 div 被搞砸了，但在 addClass('cleanstate') 之后添加它会恢复正常。另一种解决方案是在基本 CSS 属性中放置一个 ID 属性，这样它们就不会被删除，这也可以提高性能，但我只想知道另一种解决方案来摆脱除“.cleanstate”之外的所有属性

我问这个是因为，在真正的脚本中，div 会经历各种类的变化。

【问题讨论】：

获取类，用" "（空格）分割它们，并为每个类决定是否删除？

标签： javascript jquery class addclass removeclass

【解决方案1】：

您可以使用attr 一次重置整个值，而不是分两步完成，方法是用您想要的类覆盖所有类值：

jQuery('#container div.cleanstate').attr('class', 'cleanstate');

示例：http://jsfiddle.net/jtmKK/1/

【讨论】：

【解决方案2】：

使用attr直接将class属性设置为你想要的具体值：

$('#container div.cleanstate').attr('class','cleanstate');

【讨论】：

【解决方案3】：

使用普通的旧 JavaScript，而不是 JQuery：

document.getElementById("container").className = "cleanstate";

【讨论】：

【解决方案4】：

由于 CSS 动画，有时您需要保留一些类，因为一旦您删除所有类，动画可能无法正常工作。相反，您可以像这样保留一些类并删除其余类：

$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');

【讨论】：

我喜欢删除一些类的答案。我认为代码可能是$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');。我尝试进行编辑，但 stackoverflow 再次无法帮助您。

【解决方案5】：

关于抢答案，为了完整起见，您还可以将 querySelector 与 vanilla 一起使用

document.querySelector('#container div.cleanstate').className = "cleanstate";

【讨论】：

【解决方案6】：

如果您想保留一门或多门课程，并且想要除这些课程之外的课程，该怎么办。如果您不想删除所有类，则这些解决方案将不起作用，再次添加该特定类。 使用 attr 和 removeClass() 在第一个实例中重置所有类，然后再次附加该特定类。如果您在再次重置的类上使用某些动画，它将失败。

如果您想简单地删除除某些类之外的所有类，那么这适合您。我的解决方案是：removeAllExceptThese

Array.prototype.diff = function(a) {
            return this.filter(function(i) {return a.indexOf(i) < 0;});
        };
$.fn.removeClassesExceptThese = function(classList) { 
/* pass mutliple class name in array like ["first", "second"] */
            var $elem = $(this);

            if($elem.length > 0) {
                var existingClassList = $elem.attr("class").split(' ');
                var classListToRemove = existingClassList.diff(classList);
                $elem
                    .removeClass(classListToRemove.join(" "))
                    .addClass(classList.join(" "));
            }
            return $elem;
        };

这不会重置所有类，只会删除必要的类。
我在我的项目中需要它，我只需要删除不匹配的类。

你可以使用它$(".third").removeClassesExceptThese(["first", "second"]);

【讨论】：