Xóa tất cả các lớp ngoại trừ một

Tôi biết rằng với một số hành động jQuery, chúng ta có thể thêm rất nhiều lớp vào một div cụ thể:

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

Giả sử rằng với một số lần nhấp và những thứ khác, div nhận được rất nhiều lớp

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

Vì vậy, làm thế nào tôi có thể loại bỏ tất cả các lớp ngoại trừ một? Ý tưởng duy nhất tôi nghĩ ra là:

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

Trong khi removeClass()giết tất cả các lớp, div bị hỏng, nhưng chỉ thêm sau đó addClass('cleanstate')nó sẽ trở lại bình thường. Giải pháp khác là đặt thuộc tính ID với các thuộc tính CSS cơ bản để chúng không bị xóa, điều này cũng cải thiện hiệu suất, nhưng tôi chỉ muốn biết một giải pháp khác để loại bỏ tất cả ngoại trừ ".cleanstate"

Tôi hỏi điều này bởi vì, trong script thực, div phải chịu nhiều thay đổi khác nhau của các lớp.

Thay vì thực hiện nó trong 2 bước, bạn chỉ có thể đặt lại toàn bộ giá trị cùng một lúc bằng attrcách ghi đè lên tất cả các giá trị lớp bằng lớp bạn muốn:

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

Mẫu: http://jsfiddle.net/jtmKK/1/

Sử dụng attr để đặt trực tiếp thuộc tính lớp thành giá trị cụ thể mà bạn muốn:

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

Với JavaScript cũ thuần túy, không phải JQuery:

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

Đôi khi bạn cần giữ lại một số lớp do hoạt ảnh CSS, vì ngay sau khi bạn xóa tất cả các lớp, hoạt ảnh có thể không hoạt động. Thay vào đó, bạn có thể giữ một số lớp và xóa phần còn lại như sau:

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

liên quan đến cướp câu trả lời và vì lợi ích của sự hoàn chỉnh, bạn cũng có thể sử dụng querySelector với vani

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

Điều gì sẽ xảy ra nếu bạn muốn giữ một hoặc nhiều lớp và muốn các lớp ngoại trừ những lớp này. Giải pháp này sẽ không hoạt động khi bạn không muốn xóa tất cả các lớp, hãy thêm lại lớp perticular đó. Sử dụng attr và removeClass () đặt lại tất cả các lớp trong trường hợp đầu tiên và sau đó đính kèm lại lớp perticular đó. Nếu bạn sử dụng một số hoạt ảnh trên các lớp đang được đặt lại, nó sẽ không thành công.

Nếu bạn chỉ muốn xóa tất cả các lớp ngoại trừ một số lớp thì điều này là dành cho bạn. Giải pháp của tôi dành cho: 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;
        };

Thao tác này sẽ không đặt lại tất cả các lớp, nó sẽ chỉ xóa những thứ cần thiết.
Tôi cần nó trong dự án của mình, nơi tôi chỉ cần loại bỏ các lớp không phù hợp.

Bạn co thể sử dụng no $(".third").removeClassesExceptThese(["first", "second"]);