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

Question

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

Answer 1

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

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

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

Answer 2

Используйте attr , чтобы напрямую установить атрибут класса на конкретное значение, которое вы хотите:

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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