Pertanyaan Hapus semua kelas kecuali satu


Yah, 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-hal lain, div mendapat banyak kelas

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

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

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

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

Saya menanyakan ini karena, dalam naskah aslinya, div mengalami berbagai perubahan kelas.


75
2018-03-19 16:26


asal


Jawaban:


Daripada melakukannya dalam 2 langkah, Anda hanya dapat mengatur ulang seluruh nilai sekaligus dengan attr dengan menimpa semua nilai kelas dengan kelas yang Anda inginkan:

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

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


178
2018-03-19 16:30



Menggunakan attr untuk langsung mengatur atribut class ke nilai spesifik yang Anda inginkan:

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

29
2018-03-19 16:30



Dengan JavaScript lama biasa, bukan JQuery:

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

13
2018-02-09 15:23



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

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

3
2017-10-18 22:54



berkaitan dengan robs answer dan untuk dan demi kelengkapan Anda juga dapat menggunakan querySelector dengan vanilla

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

2
2017-11-04 08:21



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

Jika Anda hanya ingin menghapus semua kelas kecuali beberapa kelas maka ini adalah 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 harus menghapus kelas yang tidak cocok.

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


0
2018-03-02 07:31