删除除一个以外的所有类


89

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


获取类,用" "(空格)将其拆分,然后为每个类决定是否删除它?
pimvdb 2011年

Answers:


202

无需分两个步骤进行操作,您可以attr通过使用所需的类覆盖所有类值来一次重置整个值:

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

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


33

使用attr直接将class属性设置为所需的特定值:

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

15

使用普通的旧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并没有让您有所帮助。
goodeye 2015年

2

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

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

0

如果您想保留一门或多门课程,并希望除这些课程以外的课程怎么办?如果您不想删除所有类,请再次添加该垂直类,这些解决方案将不起作用。 使用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"]);

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.