Удалить все классы кроме одного

Ну, я знаю, что с помощью некоторых действий 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 претерпевает различные изменения классов.

Вместо того, чтобы делать это в два шага, вы можете просто сбросить все значение сразу 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');

Что касается ответа на Робс, и для и для полноты вы также можете использовать querySelector с vanilla

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"]);