Eliminar todas las clases excepto una

Question

Bueno, sé que con algunas acciones de jQuery, podemos agregar muchas clases a un div:

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

Digamos que con algunos clics y otras cosas, el div recibe muchas clases

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

Entonces, ¿cómo puedo eliminar todas las clases excepto una? La única idea que he surgido es con esto:

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

Tiempo removeClass() mata a todas las clases, el div queda jodido, pero agregando justo después de eso addClass('cleanstate') Se remonta a la normalidad. La otra solución es poner un atributo de identificación con las propiedades de CSS base para que no se eliminen, lo que también mejora el rendimiento, pero solo quiero saber otra solución para deshacerse de todos, excepto ".CleanState"

Estoy preguntando esto porque, en el guión real, el DIV sufre varios cambios de clases.

Answer 1

En lugar de hacerlo en 2 pasos, podría restablecer todo el valor a la vez con attr sobrescribiendo todos los valores de clase con la clase que desea:

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

Muestra: http://jsfiddle.net/jtmkk/1/

Answer 2

Usar atencia Para establecer directamente el atributo de clase en el valor específico que desea:

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

Answer 3

Con JavaScript antiguo y no jQuery:

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

Answer 4

A veces debe mantener algunas de las clases debido a la animación de CSS, porque tan pronto como elimina todas las clases, la animación puede no funcionar. En cambio, puede mantener algunas clases y eliminar el resto de esta manera:

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

Answer 5

con respecto a Robs Respuesta y para y, por el bien de la integridad, también puede usar QuerySelector con vainilla

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

Answer 6

¿Qué pasa si quieres mantener una o más de una clases y quieres clases, excepto estas? Esta solución no funcionaría donde no desee eliminar todas las clases, agregue esa clase perticular nuevamente.Usando ATtr y eliminar las () restablece todas las clases en primera instancia y luego adjunte esa clase perticular nuevamente. Si usa alguna animación en las clases que se están restableciendo nuevamente, fallará.

Si simplemente desea eliminar todas las clases, excepto alguna clase, esto es para usted. Mi solución es para: eliminar la subscept.

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;
        };

Esto no restablecerá todas las clases, solo eliminará necesaria.
Lo necesitaba en mi proyecto donde necesitaba eliminar solo no las clases coincidentes.

Puedes usarlo $(".third").removeClassesExceptThese(["first", "second"]);