web-dev-qa-db-ja.com

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')を追加すると通常に戻ります。もう1つの解決策は、削除されないようにベースCSSプロパティにID属性を設定することです。これにより、パフォーマンスも向上しますが、「。cleanstate」以外のすべてを削除する別の解決策を知りたいだけです。

実際のスクリプトでは、divがクラスのさまざまな変更に苦しんでいるので、私はこれを求めています。

javascriptjqueryclassaddclassremoveclass
84
DarkGhostHunter

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

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

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

195
Yahel

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

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

JQueryではなく、プレーンな古いJavaScriptを使用する場合：

document.getElementById("container").className = "cleanstate";
14
Rob at TVSeries.com

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

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

ロブスの回答に関しては、完全を期すために、querySelectorをVanillaとともに使用することもできます。

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

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"]);を使用できます

0
No one