Frage Entferne alle Klassen außer einem


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

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

Nehmen wir an, dass das div mit einigen Klicks und anderen Dingen viele Klassen bekommt

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

Also, wie kann ich alle Klassen außer einem entfernen? Die einzige Idee, die ich habe, ist damit:

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

Während removeClass() tötet alle Klassen, die div werden vermasselt, aber kurz danach addClass('cleanstate') es geht wieder normal. Die andere Lösung besteht darin, ein ID-Attribut mit den CSS-Basiseigenschaften zu versehen, damit sie nicht gelöscht werden, was auch die Leistung verbessert, aber ich möchte nur eine andere Lösung kennen, um alle außer ".cleanstate" loszuwerden.

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


75
2018-03-19 16:26


Ursprung


Antworten:


Anstatt es in 2 Schritten zu tun, könnten Sie einfach den gesamten Wert auf einmal zurücksetzen attr indem Sie alle Klassenwerte mit der gewünschten Klasse überschreiben:

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

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


178
2018-03-19 16:30



Benutzen attr um das Klassenattribut direkt auf den gewünschten Wert festzulegen:

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

29
2018-03-19 16:30



Mit einfachem altem JavaScript, nicht JQuery:

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

13
2018-02-09 15:23



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

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

3
2017-10-18 22:54



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

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

2
2017-11-04 08:21



Was wenn, wenn Sie eine oder mehrere Klassen behalten möchten und Klassen außer diesen möchten. Diese Lösung würde nicht funktionieren, wenn Sie nicht möchten, dass alle Klassen diese Klasse erneut entfernen. Die Verwendung von attr und removeClass () setzt alle Klassen in der ersten Instanz zurück und fügt diese Klasse wieder hinzu. Wenn Sie eine Animation für Klassen verwenden, die erneut zurückgesetzt werden, schlägt dies fehl.

Wenn Sie einfach alle Klassen außer einer Klasse entfernen möchten, dann ist dies 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;
        };

Dies wird nicht alle Klassen zurücksetzen, es wird nur notwendig entfernen.
Ich brauchte es in meinem Projekt, wo ich nur nicht passende Klassen entfernen musste.

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


0
2018-03-02 07:31