删除除一个以外的所有类

Question

好吧，我知道通过一些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会遭受各种类的更改。

Answer 1

您可以通过使用所需的类覆盖所有类值，使用attr立即重置整个值，而不是分两步完成：

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

样本：http://jsfiddle.net/jtmKK/1/

Answer 2

使用attr直接将class属性设置为您想要的特定值：

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

Answer 3

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

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

Answer 4

有时你需要保留一些类，因为CSS动画，因为一旦删除所有类，动画可能无法正常工作。相反，你可以保留一些类，并删除其余的如下：

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

Answer 5

关于抢夺答案，为了完整起见，你也可以使用querySelector和vanilla

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

Answer 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"]);