1つを除くすべてのクラスを削除する

まあ、私はいくつかのjQueryアクションを使用して、特定のdivに多くのクラスを追加できることを知っています。

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

いくつかのクリックなどで、divは多くのクラスを取得するとします

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

では、どのようにして1つを除くすべてのクラスを削除できますか？私が思いついた唯一のアイデアはこれです：

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

removeClass()すべてのクラスを殺している間、divはめちゃくちゃになりますが、直後に追加addClass('cleanstate')すると通常に戻ります。他の解決策は、削除されないように基本的なCSSプロパティを持つID属性を配置することです。これにより、パフォーマンスも向上しますが、「。cleanstate」以外のすべてを取り除く別の解決策を知りたいだけです。

実際のスクリプトでは、divがクラスのさまざまな変更に影響を受けるため、これを求めています。

2つのステップで行う代わりに、必要なattrクラスですべてのクラス値を上書きすることにより、値全体を一度にリセットできます。

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

サンプル：http : //jsfiddle.net/jtmKK/1/

attrを使用して、クラス属性を必要な特定の値に直接設定します。

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

JQueryではなくプレーンな古いJavaScriptの場合：

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

CSSアニメーションのために、一部のクラスを保持する必要がある場合があります。これは、すべてのクラスを削除するとすぐにアニメーションが機能しなくなる可能性があるためです。代わりに、いくつかのクラスを保持し、残りを次のように削除できます。

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

強盗の回答に関して、そして完全を期すために、バニラでquerySelectorを使用することもできます

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

1つまたは複数のクラスを保持し、これら以外のクラスが必要な場合はどうなるでしょうか。これらのソリューションは、すべてのクラスを削除したくない場合には機能せず、その特定のクラスを再度追加します。 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"]);