Rimuovi tutte le classi tranne una

Bene, so che con alcune azioni jQuery, possiamo aggiungere molte classi a un particolare div:

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

Diciamo che con alcuni clic e altre cose, il div ottiene molte classi

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

Allora, come posso rimuovere tutte le classi tranne una? L'unica idea che mi è venuta è questa:

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

Mentre removeClass()uccide tutte le classi, il div si incasina, ma aggiungendo subito dopo addClass('cleanstate')si torna alla normalità. L'altra soluzione è mettere un attributo ID con le proprietà CSS di base in modo che non vengano cancellati, il che migliora anche le prestazioni, ma voglio solo conoscere un'altra soluzione per sbarazzarsi di tutto tranne ".cleanstate"

Lo chiedo perché, nel copione reale, il subacqueo subisce vari cambi di classe.

Invece di farlo in 2 passaggi, puoi semplicemente reimpostare l'intero valore in una volta attrsovrascrivendo tutti i valori della classe con la classe che desideri:

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

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

Usa attr per impostare direttamente l'attributo class sul valore specifico che desideri:

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

Con il semplice vecchio JavaScript, non JQuery:

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

A volte è necessario mantenere alcune delle classi a causa dell'animazione CSS, perché non appena si rimuovono tutte le classi, l'animazione potrebbe non funzionare. Invece, puoi mantenere alcune classi e rimuovere il resto in questo modo:

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

per quanto riguarda la risposta robs e per e per completezza puoi anche usare querySelector con vanilla

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

E se volessi mantenere una o più classi e volessi lezioni tranne queste. Questa soluzione non funzionerebbe dove non si desidera rimuovere tutte le classi aggiungendo di nuovo quella classe perticolare. L'utilizzo di attr e removeClass () ripristina tutte le classi in prima istanza e quindi allega di nuovo quella classe perticolare. Se utilizzi un'animazione su classi che vengono ripristinate di nuovo, fallirà.

Se vuoi semplicemente rimuovere tutte le classi eccetto alcune, questo è per te. La mia soluzione è per: 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;
        };

Questo non ripristinerà tutte le classi, rimuoverà solo il necessario.
Ne avevo bisogno nel mio progetto in cui dovevo rimuovere solo le classi non corrispondenti.

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