क्लास एट्रिब्यूट से पैटर्न से मेल खाने वाली कक्षा को कैसे हटाते हैं, लेकिन अन्य कक्षाओं को बनाए रखते हैं?

Question

मैं वर्गों है कि सभी टैग पर वर्ग विशेषता से 'ब्लू'

नमूना एचटीएमएल के साथ समाप्त हटाना चाहते हैं

<p class="text_blue happy">this is blue text</p> 
<p class="text_red nothappy">this is red text</p> 
<img class="img_blue nothappy" /> 

यह मैं वर्गों है कि 'ब्लू'

के साथ समाप्त साथ सभी तत्वों को दे देंगे

$('[class$=blue]'); 

मैं क्लास विशेषता से इन मिलान किए गए क्लासनामों को कैसे पॉप करूं?

Answer 1

आप इस प्रकार का नियमित अभिव्यक्ति के साथ पूरी कक्षा नाम बाहर खींच कर सकते हैं:

$('[class$="blue"]').each(function() { 
    var clsName = this.className.match(/\w*blue\w*/)[0]; 
}); 

एक बात है कि आप का एहसास होना चाहिए कि $('[class$="blue"]')class नामित पूरे विशेषता पर चल रही है। मैं व्यक्तिगत वर्ग के नामों पर काम नहीं करता हूं। इसलिए, यह मिलान हो जाएगा:

class="happy text_blue" 

लेकिन, यह मेल नहीं खाएगी:

class="text_blue happy" 

क्योंकि वर्ग विशेषता "blue" साथ अंत नहीं है। आप आगे वर्ग ऐसे नाम हैं जो खत्म नहीं हुई को फ़िल्टर करना चाहता है तो

$('[class*="blue"]').each(function() { 
    var clsName = this.className.match(/\w*blue\w*/)[0]; 
}); 

: आप इसे किसी भी वर्ग के नाम है कि जहां यह वर्ग नाम विशेषता में रखा जाता है की परवाह किए बिना "blue" शामिल प्राप्त करना चाहते हैं, तो आप का उपयोग करना होगा नीले रंग के साथ, आप इस तरह है कि कर सकता है जे एस के साथ:

$('[class*="blue"]').each(function() { 
    var match = this.className.match(/\w*blue(\b|$)/); 
    if (match) { 
     var clsName = match[0]; 
    } 
}); 

आप वस्तुओं से इन वर्ग के नाम को निकालना चाहते हैं, तो आप इसे इस तरह कर सकता है:

$('[class*="blue"]').each(function() { 
    var match = this.className.match(/\w*blue(\b|$)/); 
    if (match) { 
     $(this).removeClass(match[0]); 
    } 
}); 

यह भी इस तरह से जो एक छोटे से क्लीनर लगता है किया जा सकता है, लेकिन यह पूरी तरह से वर्ग के नाम के आसपास अतिरिक्त व्हाइट को साफ नहीं करता है इसे हटाने है:

$('[class*="blue"]').each(function() { 
    this.className = this.className.replace(/\w*blue(\b|$)/, "").replace(/\s+/g, ' '); 
}); 

Answer 2

यदि आप इसे बहुत कुछ करने जा रहे हैं, तो आप कक्षाओं को असाइन करने के तरीके को बदलना चाहेंगे। आप इस तरह अपने HTML बना सकते हैं:

<p class="text blue happy">this is blue text</p> 

और फिर बजाय अपने सीएसएस में .text_blue की एक चयनकर्ता का उपयोग करके की, .text.blue बजाय का उपयोग करें। फिर आप कक्षाओं से "नीला" हटा सकते हैं।