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

Ну, я знаю, что с некоторыми действиями jQuery мы можем добавить много классов к определенному div:

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

предположим, что с некоторыми щелчками мыши и другими вещами div получает много классов

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

Итак, как я могу удалить все классы, кроме одного? Единственная идея, которая пришла мне в голову:--6--> 

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

пока removeClass() убивает все классы, div запутывается, но добавляет сразу после этого addClass('cleanstate') он возвращается к нормальной жизни. Иное решение это поставить атрибут ID с базовыми свойствами CSS, чтобы они не удалялись, что также улучшает производительность, но я просто хочу знать другое решение, чтобы избавиться от всех, кроме ".cleanstate"

Я спрашиваю об этом, потому что в реальном скрипте div страдает различными изменениями классов.

77
addclass class javascript jquery removeclass

6 ответов

вместо того, чтобы делать это в 2 шага, вы можете просто сбросить все значение сразу с помощью attr путем перезаписи всех значений класса с классом, который вы хотите:

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

образец:http://jsfiddle.net/jtmKK/1/

181

использовать attr установить атрибут class для определенного значения требуется:

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

С простым старым JavaScript, а не JQuery:

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

иногда вам нужно сохранить некоторые классы из-за анимации CSS, потому что как только вы удалите все классы, анимация может не работать. Вместо этого вы можете сохранить некоторые классы и удалить остальные следующим образом:

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

что касается ответа robs и для полноты и для полноты вы также можете использовать querySelector с vanilla

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

Что делать, если вы хотите сохранить один или несколько классов и хотите классы, кроме этих. Это решение не будет работать, если вы не хотите удалять все классы, добавьте этот класс perticular снова. через 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"]);

0