web-dev-qa-db-fra.com

Supprimer toutes les classes sauf une

Eh bien, je sais qu'avec certaines actions jQuery, nous pouvons ajouter beaucoup de classes à une div particulière:

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

Disons qu'avec des clics et d'autres choses, la div reçoit 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 je suis venu est avec ceci:

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

Alors que removeClass() tue toutes les classes, la div est foutue, mais en ajoutant juste après addClass('cleanstate'), elle revient à la normale. L'autre solution consiste à 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 supprimer tous les éléments sauf ".cleanstate".

Je pose la question parce que, dans le scénario réel, la div subit divers changements de classes.

javascriptjqueryclassaddclassremoveclass
84
DarkGhostHunter

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

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

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

195
Yahel

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

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

Avec du vieux JavaScript, pas JQuery:

document.getElementById("container").className = "cleanstate";
14
Rob at TVSeries.com

Parfois, vous devez conserver certaines classes à cause de l'animation CSS, car dès que vous supprimez toutes les classes, l'animation risque de ne plus fonctionner. Au lieu de cela, vous pouvez garder certaines classes et supprimer le reste comme ceci:

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

en ce qui concerne les réponses volées et pour des raisons de complétude, vous pouvez également utiliser querySelector with Vanilla

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

Que se passe-t-il si vous voulez conserver une ou plusieurs classes et que vous voulez des classes sauf celles-ci? Ces solutions ne fonctionneraient pas si vous ne vouliez pas supprimer toutes les classes, ajoutez à nouveau cette classe spécifique. Utiliser attr et 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 en cours de réinitialisation, cela échouera.

Si vous voulez simplement supprimer toutes les classes sauf une classe, ceci 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, il ne supprimera que le nécessaire.
J'en avais besoin dans mon projet où je devais supprimer uniquement les classes ne correspondant pas.

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

0
No one