Entfernen Sie alle Klassen außer einer

89

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.

DarkGhostHunter
quelle
Holen Sie sich Klassen, teilen Sie sie mit " "(Leerzeichen) und entscheiden Sie für jede, ob Sie sie löschen möchten oder nicht?
Pimvdb

Antworten:

202

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/

Yahel
quelle
33

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

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

Mit einfachem altem JavaScript, nicht mit JQuery:

document.getElementById("container").className = "cleanstate";
Rob bei TVSeries.com
quelle
4

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');
Nizzy
quelle
Ich mag die Antwort, um einige Klassen zu entfernen. Ich denke der Code könnte sein $('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');. Ich habe versucht zu bearbeiten, aber der Stackoverflow lässt Sie nicht hilfreich sein.
Goodeye
2

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";
rauben
quelle
0

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

Niemand
quelle