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 reçoit 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 je suis venu est avec ceci:
$('#container div.cleanstate').removeClass().addClass('cleanstate');
Alors que removeClass() tue toutes les classes, la div se fait foirer, mais en ajoutant juste après addClass('cleanstate') cela revient à la normale. L'autre solution consiste à mettre un attribut ID avec le 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 script réel, la div subit divers changements de classes.
6 réponses
Au lieu de le faire en 2 étapes, vous pouvez simplement réinitialiser la valeur entière à la fois avec attr en écrasant toutes les valeurs de classe avec la classe que vous voulez:
jQuery('#container div.cleanstate').attr('class', 'cleanstate');
Échantillon: http://jsfiddle.net/jtmKK/1/
Utiliser attr pour définir directement l'attribut de classe à la valeur spécifique que vous souhaitez:
$('#container div.cleanstate').attr('class','cleanstate');
Avec un vieux JavaScript simple, pas JQuery:
document.getElementById("container").className = "cleanstate";
Parfois, vous devez conserver certaines 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 garder certaines classes et supprimer le reste comme ceci:
$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');
En ce qui concerne la réponse de robs et pour et par souci d'exhaustivité, vous pouvez également utiliser querySelector avec vanilla
document.querySelector('#container div.cleanstate').className = "cleanstate";
Que faire si vous voulez garder une ou plusieurs classes et que vous voulez des classes sauf celles-ci. Ces solutions ne fonctionneraient pas là où vous ne voulez pas supprimer toutes les classes ajouter à nouveau cette classe perticulaire. L'utilisation d'attr et removeClass() réinitialise toutes les classes en première instance, puis attache à nouveau cette classe perticulaire. Si vous utilisez une animation sur les classes qui sont réinitialisées à nouveau, cela échouera.
Si vous voulez simplement supprimer toutes les classes sauf une classe, alors c'est pour vous. Mon la 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 supprimera seulement nécessaire.
J'en avais besoin dans mon projet où je devais supprimer uniquement les classes ne correspondant pas.
Vous pouvez utiliser $(".third").removeClassesExceptThese(["first", "second"]);