Entfernen Sie alle Klassen außer einer

Nun, ich weiß, dass wir mit einigen jQuery-Aktionen einem bestimmten div viele Klassen hinzufügen können:

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

Nehmen wir an, dass der Div mit einigen Klicks und anderen Dingen viele Klassen bekommt

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

Wie kann ich also alle Klassen außer einer entfernen? Die einzige Idee, die mir gekommen ist, ist folgende:

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

Während removeClass()alle Klassen getötet werden, wird das Div vermasselt, aber kurz danach wird addClass('cleanstate')es wieder normal. Die andere Lösung besteht darin, ein ID-Attribut mit den Basis-CSS-Eigenschaften zu erstellen, damit diese nicht gelöscht werden. Dies verbessert auch die Leistung. Ich möchte jedoch nur eine andere Lösung kennen, um alle außer ".cleanstate" zu entfernen.

Ich frage dies, weil das Div im realen Skript verschiedene Klassenänderungen erleidet.

Anstatt dies in zwei Schritten zu tun, können Sie einfach den gesamten Wert auf einmal zurücksetzen, attrindem Sie alle Klassenwerte mit der gewünschten Klasse überschreiben:

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

Beispiel: http://jsfiddle.net/jtmKK/1/

Verwenden Sie attr , um das Klassenattribut direkt auf den gewünschten Wert festzulegen :

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

Mit einfachem altem JavaScript, nicht mit JQuery:

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

Manchmal müssen Sie einige der Klassen aufgrund von CSS-Animationen beibehalten, da die Animation möglicherweise nicht funktioniert, sobald Sie alle Klassen entfernen. Stattdessen können Sie einige Klassen behalten und den Rest folgendermaßen entfernen:

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

In Bezug auf die Antwort von Robs und der Vollständigkeit halber können Sie querySelector auch mit Vanille verwenden

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

Was ist, wenn Sie eine oder mehrere Klassen behalten möchten und Klassen außer diesen möchten? Diese Lösung funktioniert nicht, wenn Sie nicht alle Klassen entfernen möchten, und fügen Sie diese bestimmte Klasse erneut hinzu. Wenn Sie attr und removeClass () verwenden, werden zunächst alle Klassen zurückgesetzt und diese bestimmte Klasse erneut angehängt. Wenn Sie eine Animation für Klassen verwenden, die erneut zurückgesetzt werden, schlägt dies fehl.

Wenn Sie einfach alle Klassen außer einigen Klassen entfernen möchten, ist dies das Richtige für Sie. Meine Lösung ist für: 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;
        };

Dadurch werden nicht alle Klassen zurückgesetzt, sondern nur die erforderlichen entfernt.
Ich brauchte es in meinem Projekt, wo ich nur nicht übereinstimmende Klassen entfernen musste.

Du kannst es benutzen $(".third").removeClassesExceptThese(["first", "second"]);