ลบคลาสทั้งหมดยกเว้นคลาสเดียว

ฉันรู้ว่าด้วยการกระทำ 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 มีการเปลี่ยนแปลงต่างๆของคลาส

แทนที่จะทำใน 2 ขั้นตอนคุณสามารถรีเซ็ตค่าทั้งหมดพร้อมกันได้attrโดยเขียนทับค่าคลาสทั้งหมดด้วยคลาสที่คุณต้องการ:

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

ตัวอย่าง: http://jsfiddle.net/jtmKK/1/

ใช้attrเพื่อตั้งค่าแอตทริบิวต์คลาสเป็นค่าเฉพาะที่คุณต้องการ:

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

ด้วย JavaScript เก่าธรรมดาไม่ใช่ JQuery:

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

บางครั้งคุณต้องเก็บบางคลาสไว้เนื่องจากแอนิเมชั่น CSS เพราะทันทีที่คุณลบคลาสทั้งหมดภาพเคลื่อนไหวอาจไม่ทำงาน แต่คุณสามารถเก็บบางชั้นเรียนและลบส่วนที่เหลือออกได้ดังนี้:

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

เกี่ยวกับ robs คำตอบและสำหรับและเพื่อความสมบูรณ์คุณยังสามารถใช้ querySelector กับวานิลลา

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

จะเกิดอะไรขึ้นถ้าคุณต้องการเก็บหนึ่งคลาสหรือมากกว่าหนึ่งคลาสและต้องการคลาสยกเว้นคลาสเหล่านี้ วิธีแก้ปัญหาเหล่านี้จะใช้ไม่ได้เมื่อคุณไม่ต้องการลบคลาสทั้งหมดเพิ่มคลาส perticular นั้นอีกครั้ง การใช้ attr และ removeClass () จะรีเซ็ตคลาสทั้งหมดในอินสแตนซ์แรกจากนั้นแนบคลาส perticular นั้นอีกครั้ง หากคุณใช้แอนิเมชั่นบางส่วนในคลาสที่กำลังรีเซ็ตอีกครั้งจะล้มเหลว

หากคุณต้องการเพียงแค่ลบคลาสทั้งหมดยกเว้นบางคลาสสิ่งนี้เหมาะสำหรับคุณ วิธีแก้ปัญหาของฉันคือ: 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"]);