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

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

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

Ответы

Ответ 1

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

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

Пример: http://jsfiddle.net/jtmKK/1/

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

чтобы отвечать на запросы, и для и для полноты вы также можете использовать querySelector с ванилью

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

Ответ 6

Что делать, если вы хотите сохранить один или несколько классов и хотите использовать классы, кроме них. Это решение не сработает, если вы не захотите удалить все классы, чтобы добавить этот класс. Использование attr и removeClass() сбрасывает все классы в первом экземпляре, а затем снова присоединяет этот перкулярный класс. Если вы снова используете анимацию в классах, которые являются reset, это не сработает.

Если вы хотите просто удалить все классы, кроме некоторого класса, то это для вас. Мое решение для: 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;
        };

Это не будет reset все классы, он удалит только необходимые.
Мне нужно было это в моем проекте, где мне нужно было удалить только не соответствующие классы.

Вы можете использовать его $(".third").removeClassesExceptThese(["first", "second"]);