Hapus semua kelas kecuali satu

Nah, saya tahu bahwa dengan beberapa tindakan jQuery, kita dapat menambahkan banyak kelas ke div tertentu:

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

Katakanlah dengan beberapa klik dan hal lainnya, div mendapatkan banyak kelas

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

Jadi, bagaimana saya bisa menghapus semua kelas kecuali satu? Satu-satunya ide yang saya dapatkan adalah dengan ini:

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

Sementara removeClass()membunuh semua kelas, div menjadi kacau, tetapi menambahkan setelah addClass('cleanstate')itu kembali normal. Solusi lainnya adalah menempatkan atribut ID dengan properti CSS dasar sehingga tidak terhapus, yang juga meningkatkan kinerja, tetapi saya hanya ingin mengetahui solusi lain untuk menyingkirkan semua kecuali ".cleanstate"

Saya menanyakan ini karena, dalam skrip asli, div mengalami berbagai perubahan kelas.

Alih-alih melakukannya dalam 2 langkah, Anda bisa menyetel ulang seluruh nilai sekaligus dengan attrmenimpa semua nilai kelas dengan kelas yang Anda inginkan:

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

Contoh: http://jsfiddle.net/jtmKK/1/

Gunakan attr untuk langsung menyetel atribut kelas ke nilai spesifik yang Anda inginkan:

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

Dengan JavaScript lama biasa, bukan JQuery:

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

Terkadang Anda perlu mempertahankan beberapa kelas karena animasi CSS, karena begitu Anda menghapus semua kelas, animasi mungkin tidak berfungsi. Sebagai gantinya, Anda dapat mempertahankan beberapa kelas dan menghapus yang lainnya seperti ini:

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

mengenai jawaban robs dan demi kelengkapan Anda juga dapat menggunakan querySelector dengan vanilla

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

Bagaimana jika Anda ingin mempertahankan satu atau lebih dari satu kelas dan ingin kelas kecuali ini. Solusi ini tidak akan berfungsi jika Anda tidak ingin menghapus semua kelas menambahkan kelas perticular itu lagi. Menggunakan attr dan removeClass () menyetel ulang semua kelas dalam contoh pertama dan kemudian melampirkan kelas perticular itu lagi. Jika Anda menggunakan beberapa animasi pada kelas yang di-reset lagi, itu akan gagal.

Jika Anda ingin menghapus semua kelas kecuali beberapa kelas, maka ini untuk Anda. Solusi saya adalah untuk: 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;
        };

Ini tidak akan mengatur ulang semua kelas, itu hanya akan menghapus yang diperlukan.
Saya membutuhkannya dalam proyek saya di mana saya hanya perlu menghapus kelas yang tidak cocok.

Anda bisa menggunakannya $(".third").removeClassesExceptThese(["first", "second"]);