Biri hariç tüm sınıfları kaldır

Bazı jQuery eylemleriyle, belirli bir div'e çok sayıda sınıf ekleyebileceğimizi biliyorum:

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

Diyelim ki, bazı tıklamalar ve diğer şeylerle, div,

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

Peki, biri hariç tüm sınıfları nasıl kaldırabilirim? Aklıma gelen tek fikir şudur:

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

İken removeClass()öldürür bütün sınıflar, div berbat ama olsun sadece bundan sonra ekleyerek addClass('cleanstate')bu normale döner. Diğer çözüm, silinmemeleri için temel CSS özelliklerine bir kimlik özelliği koymaktır, bu da performansı artırır, ancak ".cleanstate" dışındaki her şeyden kurtulmak için başka bir çözüm bilmek istiyorum.

Bunu soruyorum çünkü gerçek senaryoda, div çeşitli sınıf değişikliklerinden muzdariptir.

Bunu 2 adımda yapmak yerine, istediğiniz attrsınıfın tüm sınıf değerlerinin üzerine yazarak tek seferde tüm değeri sıfırlayabilirsiniz :

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

Örnek: http://jsfiddle.net/jtmKK/1/

Sınıf özniteliğini doğrudan istediğiniz belirli değere ayarlamak için attr kullanın :

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

JQuery ile değil, düz eski JavaScript ile:

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

Bazen CSS animasyonu nedeniyle bazı sınıfları tutmanız gerekir, çünkü tüm sınıfları kaldırdığınız anda animasyon çalışmayabilir. Bunun yerine, bazı sınıfları tutabilir ve geri kalanını şu şekilde kaldırabilirsiniz:

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

soygun cevabı ile ilgili olarak ve eksiksizlik uğruna ayrıca querySelector'ı vanilya ile de kullanabilirsiniz.

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

Ya bir veya daha fazla sınıf tutmak ve bunlar dışında sınıflar istiyorsanız. Bu çözüm, tüm sınıfları kaldırmak istemediğinizde işe yaramaz, o perticular sınıfı tekrar ekleyin. Attr ve removeClass () 'ın kullanılması, ilk örnekte tüm sınıfları sıfırlar ve ardından bu pertiküler sınıfı yeniden ekler. Yeniden sıfırlanan sınıflarda bazı animasyonlar kullanırsanız, başarısız olur.

Bazı sınıflar dışındaki tüm sınıfları kaldırmak istiyorsanız, o zaman bu sizin için. Benim çözümüm şunun içindir: 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;
        };

Bu, tüm sınıfları sıfırlamaz, yalnızca gerekli olanı kaldırır.
Sadece eşleşmeyen sınıfları kaldırmam gereken projemde buna ihtiyacım vardı.

Kullanabilirsin $(".third").removeClassesExceptThese(["first", "second"]);