एक को छोड़कर सभी वर्गों को हटा दें

Question 1

खैर, मुझे पता है कि कुछ jQuery कार्यों के साथ, हम कई वर्गों को एक विशेष div में जोड़ सकते हैं:

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

मान लीजिए कि कुछ क्लिक और अन्य चीजों के साथ, div को बहुत सारी कक्षाएं मिलती हैं

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

तो, मैं एक को छोड़कर सभी वर्गों को कैसे हटा सकता हूं? एकमात्र विचार जो मैं आया हूं, वह इसके साथ है:

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

जबकि removeClass()सभी वर्गों को मारता है, तो विभ्रम खराब हो जाता है, लेकिन इसके बाद बस जोड़ना addClass('cleanstate')सामान्य हो जाता है। अन्य समाधान बेस सीएसएस गुणों के साथ एक आईडी विशेषता डाल रहा है ताकि वे नष्ट न हों, प्रदर्शन में भी सुधार हो, लेकिन मैं "को छोड़कर सभी से छुटकारा पाने के लिए एक और समाधान जानना चाहता हूं।"

मैं यह इसलिए पूछ रहा हूं क्योंकि, वास्तविक स्क्रिप्ट में, div विभिन्न वर्गों के परिवर्तनों से ग्रस्त है।

Question 2

इसे 2 चरणों में करने के बजाय, आप केवल attrउस वर्ग के साथ सभी श्रेणी मानों को अधिलेखित करके एक बार में संपूर्ण मान रीसेट कर सकते हैं:

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

नमूना: http://jsfiddle.net/jtmKK/1/

Question 3

आप जो विशिष्ट मूल्य चाहते हैं, उसके वर्ग गुण को सीधे सेट करने के लिए attr का उपयोग करें :

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

Question 4

सादे पुराने जावास्क्रिप्ट के साथ, JQuery नहीं:

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

Question 5

कभी-कभी आपको सीएसएस एनीमेशन के कारण कुछ कक्षाएं रखने की आवश्यकता होती है, क्योंकि जैसे ही आप सभी कक्षाएं हटाते हैं, एनीमेशन काम नहीं कर सकता है। इसके बजाय, आप कुछ कक्षाएं रख सकते हैं और बाकी को इस तरह हटा सकते हैं:

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

Question 6

जवाब देने के लिए और पूर्णता की खातिर, आप वैनिला के साथ क्वेरीसेलेक्टर का भी उपयोग कर सकते हैं

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

Question 7

क्या होगा यदि आप एक या एक से अधिक कक्षाएं रखना चाहते हैं और इन को छोड़कर कक्षाएं चाहते हैं। ये समाधान काम नहीं करेगा जहाँ आप सभी वर्गों को हटाना नहीं चाहते हैं फिर से उस वर्ग वर्ग को जोड़ें। Attr और removeClass () का उपयोग करते हुए पहले उदाहरण में सभी वर्गों को रीसेट करता है और फिर उस लंबवत वर्ग को फिर से जोड़ता है। यदि आप कक्षाओं पर कुछ एनीमेशन का उपयोग कर रहे हैं जो फिर से रीसेट हो रहे हैं, तो यह विफल हो जाएगा।

यदि आप कुछ वर्ग को छोड़कर सभी वर्गों को हटाना चाहते हैं तो यह आपके लिए है। मेरा समाधान इसके लिए है: 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"]);