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

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 страдает различными изменениями классов.

763 6

jQuery javascript class addclass removeclass

6 ответов:

Comments

Ничего не найдено.

Yahel · Accepted Answer · 2011-03-19 18:36:16

вместо того, чтобы делать это в 2 шага, вы можете просто сбросить все значение сразу с attr путем перезаписи всех значений класса с классом, который вы хотите:
jQuery('#container div.cleanstate').attr('class', 'cleanstate');
Образец:http://jsfiddle.net/jtmKK/1/

tvanfosson · Accepted Answer · 2011-03-19 18:30:52

использовать attr чтобы непосредственно установить атрибут class в определенное значение, которое вы хотите:
$('#container div.cleanstate').attr('class','cleanstate');

Rob at TVSeries.com · Accepted Answer · 2012-02-09 17:23:03

с обычным старым JavaScript, а не JQuery:
document.getElementById("container").className = "cleanstate";

Nizzy · Accepted Answer · 2016-06-25 01:16:25

иногда вам нужно сохранить некоторые классы из-за анимации CSS, потому что, как только вы удалите все классы, анимация может не работать. Вместо этого вы можете сохранить некоторые классы и удалить остальные следующим образом:
$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');

rob · Accepted Answer · 2015-11-04 10:21:03

что касается ответа robs и для полноты вы также можете использовать querySelector с vanilla
document.querySelector('#container div.cleanstate').className = "cleanstate";

No one · Accepted Answer · 2018-03-02 11:20:39

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