94 votes

Supprimer toutes les classes sauf une

Je sais qu'avec certaines actions jQuery, on peut ajouter beaucoup de classes à un div particulier :

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

Disons qu'avec quelques clics et d'autres choses, le div obtient beaucoup de classes

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

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

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

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

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

0 votes

Obtenir des classes, les diviser avec " " (espace) et décider pour chacun d'entre eux de le supprimer ou non ?

1voto

No one Points 805

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

Si vous voulez simplement supprimer toutes les classes à l'exception d'une certaine classe, alors ceci est pour vous. Ma solution est la suivante : 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, mais seulement celles qui sont nécessaires.
J'en avais besoin dans mon projet où je devais supprimer uniquement les classes qui ne correspondaient pas.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X