100

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

4

6 回答 6

218

attr您可以通过用您想要的类覆盖所有类值来一次重置整个值，而不是分两步进行：

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

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

于 2011-03-19T16:30:43.543 回答
33

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

$('#container div.cleanstate').attr('class','cleanstate');
于 2011-03-19T16:30:52.197 回答
20

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

document.getElementById("container").className = "cleanstate";
于 2012-02-09T15:23:03.870 回答
4

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

$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');
于 2011-10-18T22:54:34.573 回答
2

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

document.querySelector('#container div.cleanstate').className = "cleanstate";
于 2015-11-04T08:21:03.197 回答
1

如果您想保留一门或多门课程并想要除这些课程之外的课程怎么办。如果您不想删除所有类，则这些解决方案将不起作用，再次添加该特定类。 使用 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"]);

于 2018-03-02T07:31:11.967 回答