Supprimer toutes les classes sauf une

Eh bien, je sais qu'avec certaines actions jQuery, nous pouvons ajouter beaucoup de classes à un div particulier:

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

Disons qu'avec quelques clics et d'autres choses, la div obtient beaucoup de cours

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

Alors, comment puis-je supprimer toutes les classes sauf une? La seule idée que j'ai eue est celle-ci:

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

Alors que removeClass()toutes les classes tuent, la div se foutre, mais en ajoutant juste après cela, addClass('cleanstate')elle revient à la normale. L'autre solution est de mettre un attribut ID avec les propriétés CSS de base pour qu'elles ne soient pas supprimées, ce qui améliore également les performances, mais je veux juste connaître une autre solution pour me débarrasser de tout sauf ".cleanstate"

Je pose cette question parce que, dans le vrai script, le div subit divers changements de classes.

Au lieu de le faire en 2 étapes, vous pouvez simplement réinitialiser la valeur entière à la fois attren écrasant toutes les valeurs de classe par la classe souhaitée:

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

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

Utilisez attr pour définir directement l'attribut de classe sur la valeur spécifique souhaitée:

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

Avec du JavaScript ancien, pas JQuery:

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

Parfois, vous devez conserver certaines des classes en raison de l'animation CSS, car dès que vous supprimez toutes les classes, l'animation peut ne pas fonctionner. Au lieu de cela, vous pouvez conserver certaines classes et supprimer le reste comme ceci:

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

en ce qui concerne voler la réponse et pour et dans un souci d'exhaustivité, vous pouvez également utiliser querySelector avec vanilla

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

Et si vous souhaitez conserver une ou plusieurs classes et que vous voulez des classes autres que celles-ci. Ces solutions ne fonctionneraient pas si vous ne souhaitez pas supprimer toutes les classes et ajouter à nouveau cette classe spécifique. L'utilisation d'attr et de removeClass () réinitialise toutes les classes en première instance, puis attache à nouveau cette classe spécifique. Si vous utilisez une animation sur des classes qui sont à nouveau réinitialisées, cela échouera.

Si vous souhaitez simplement supprimer toutes les classes sauf certaines classes, c'est pour vous. Ma solution est pour: 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;
        };

Cela ne réinitialisera pas toutes les classes, cela ne supprimera que nécessaire.
J'en avais besoin dans mon projet où je devais supprimer uniquement les classes non correspondantes.

Tu peux l'utiliser $(".third").removeClassesExceptThese(["first", "second"]);