删除除一类之外的所有类

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') 之后添加> 它恢复正常。另一个解决方案是将 ID 属性与基本 CSS 属性一起放置，这样它们就不会被删除，这也提高了性能，但我只是想知道另一个解决方案来摆脱除“.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

关于 robs 答案，为了完整起见，您还可以将 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"]);