Видаліть усі класи, крім одного

Ну, я знаю, що за допомогою деяких дій jQuery ми можемо додати багато класів до певного div:

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

Скажімо, за допомогою деяких клацань та інших речей div отримує багато класів

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

Отже, як я можу видалити всі класи, крім одного? Єдина ідея, яку я придумав, полягає в наступному:

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

Поки removeClass()вбиває всі класи, div запсується, але додаючи відразу після цього, addClass('cleanstate')він повертається до звичного. Інше рішення - поставити атрибут ID з базовими властивостями CSS, щоб вони не видалялися, що також покращує продуктивність, але я просто хочу знати інше рішення, щоб позбутися всіх, крім ".cleanstate"

Я запитую це, тому що в реальному скрипті div зазнає різних змін класів.

Замість того, щоб робити це у 2 кроки, ви можете просто скинути все значення відразу attr, перезаписавши всі значення класу на потрібний вам клас:

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

Зразок: http://jsfiddle.net/jtmKK/1/

Використовуйте attr, щоб безпосередньо встановити атрибут класу на певне значення, яке ви хочете:

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

З простим старим JavaScript, а не JQuery:

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

Іноді вам потрібно зберегти деякі класи через анімацію CSS, оскільки як тільки ви видалите всі класи, анімація може не працювати. Натомість ви можете зберегти деякі класи, а решту видалити так:

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

щодо відповіді на robs, а для повноти та для повноти ви також можете використовувати querySelector з ваніллю

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

Що робити, якщо ви хочете зберегти один або декілька класів і хочете класи, крім цих. Це рішення не буде працювати, якщо ви не хочете видаляти всі класи, додайте цей пертичний клас знову. Використання attr і removeClass () скидає всі класи спочатку, а потім знову приєднує цей пертикулярний клас. Якщо ви використовуєте анімацію для класів, які знову скидаються, вона не вдасться.

Якщо ви хочете просто видалити всі класи, крім деяких класів, це для вас. Моє рішення для: 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;
        };

Це не скине всі класи, а видалить лише необхідне.
Мені це було потрібно у моєму проекті, де мені потрібно було видалити лише невідповідні класи.

Ви можете ним скористатися $(".third").removeClassesExceptThese(["first", "second"]);