刪除除一個以外的所有類

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')之后添加它會恢復正常。 另一個解決方案是使用基本CSS屬性放置一個ID屬性，這樣它們就不會被刪除，這也會提高性能，但我只是想知道另一個解決方案除去“.cleanstate”之外的所有解決方案。

我問這個是因為，在真實的腳本中，div會遭受各種類的更改。

Answer 1

您可以通過使用所需的類覆蓋所有類值來使用attr立即重置整個值，而不是分兩步完成：

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

示例： http ： //jsfiddle.net/jtmKK/1/

Answer 2

使用attr直接將class屬性設置為您想要的特定值：

$('#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

如果你想保留一個或多個類並且想要除了這些類之外的類，該怎么辦？ 如果您不想刪除所有類，那么這些解決方案將無法再次添加該類。 使用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"]);