jQuery के हटाएं वाइल्डकार्ड

Question

क्या सभी वर्गों के मिलान को हटाने का कोई आसान तरीका है, उदाहरण के लिए,

color-*

इसलिए अगर मेरे पास कोई तत्व है:

<div id="hello" class="color-red color-brown foo bar"></div>

हटाने के बाद, यह होगा

<div id="hello" class="foo bar"></div>

धन्यवाद!

Comments

"स्वीकार किए गए उत्तर" की तरह एक रेगेक्स गैर-स्थान शब्द सीमाओं पर टूट जाएगा। मैंने नीचे एक वैकल्पिक समाधान पोस्ट किया है। यह भी देखें: stackoverflow.com/questions/57812/…

— सिंक करें

@KabirSarin स्वीकार किए गए उत्तर के बाद से इसे ठीक करने के लिए अद्यतन किया गया है।

— एमिल बर्जरोन

css वाइल्डकार्ड्स सर्फिंगसुफल.com

— मैक्स

Answer 1

RemoveClass समारोह के बाद एक समारोह तर्क लेता jQuery 1.4 ।

$("#hello").removeClass (function (index, className) {
    return (className.match (/(^|\s)color-\S+/g) || []).join(' ');
});

लाइव उदाहरण: http://jsfiddle.net/xa9xS/1409/

Comments

मुझे लगा कि यह ध्यान देने योग्य है कि यह मेल खाते वर्गों के एक प्रमुख व्हाट्सएप को पकड़ लेगा जो शुरुआत में शुरू नहीं करते हैं। जावास्क्रिप्ट सकारात्मक समर्थन का समर्थन नहीं करता है इसलिए आपको समूह वर्कअराउंड का उपयोग करना होगा। हालाँकि, यह एक लूट है, क्योंकि हटाने का कार्य आपके क्लास स्ट्रिंग से classes = ( value || "" ).match( rnotwhite ) || [];

— व्हाट्सएप

मुझे यह घोल सबसे अच्छा लगता है! मैं दो या अधिक वर्गों को हटाने के लिए कैसे जांच कर सकता हूं? यानी sport-, nav-और color-?

— लोटेकसून

जैसे समाप्त होने वाली कक्षा से मिलान करने के लिए आप ऐसा कैसे करेंगे *-color?

— सर्किल बी

@lowtechun आप इस तरह से अपने regex में जोड़ सकते हैं (color-|sport-|nav-)। यह मेल करेगा color-, या sport-, या nav-। तो, ऊपर जवाब बन जाएगा /(^|\s)(color-|sport-|nav-)\S+/g।

— बोगी

स्वीकृत उत्तर सही है, लेकिन मुहावरेदार, मैं \ b का उपयोग करूंगा जो कि किसी भी शब्द सीमा पर मेल खाता है बजाय अधिक धान (^ | \ s) के। इसलिए, उदाहरण के लिए, एक गैर-नकारात्मक पूर्णांक और उसके बाद वाले शब्द जादू से मिलकर सभी वर्गों को हटाने के लिए, मैं / \ bmagic \ d + \ b / पर मेल करूंगा।

— कार्लडमैन

Answer 2

$('div').attr('class', function(i, c){
    return c.replace(/(^|\s)color-\S+/g, '');
});

Comments

मुझे यह पसंद है क्योंकि यह ओवरहेड को कम करता है और सीधे बिंदु पर पहुंच जाता है। जब नौकरी बेहतर होती है तो क्लास को हटाने का उपयोग क्यों करें?

— गुस्से में दान

मुझे लगता है कि आपको खाली वर्गों ( c is undefined) से बचाने की आवश्यकता है ? कम से कम जब मैंने इस पृष्ठ पर अपने प्लगइन में इसे नीचे की कोशिश की , $('a').stripClass('post', 1)"

— टाइप टाइप

@ कोबी हाँ मुझे नहीं लगता कि यह एक विशेषता पर फ़िल्टर करना संभव है और एक परिणाम लौटाता है जिसमें यह नहीं है - $('div[class]')केवल तत्वों को वापस करना चाहिए class, चाहे उनका कोई मूल्य हो या नहीं। परीक्षण परिदृश्य: jsfiddle.net/drzaus/m83mv

— drzaus

@ कोबी - मुझे लगता है कि मैं देख रहा हूँ कि तुम क्या कर रहे हो; किनारे के मामलों में जैसे .removeProp('class')या .className=undefinedफ़िल्टर [class]अभी भी कुछ देता है, वे बस हैं undefined। तो तकनीकी रूप से यह अभी भी एक वर्ग है (के विपरीत .removeAttr('class'), जिसके कारण यह आपके फ़ंक्शन को तोड़ता है, लेकिन मेरे संस्करण को नहीं। jsfiddle.net/drzaus/m83mv/4

— drzaus

: एक त्वरित परीक्षण जोड़ा जा रहा है मेरे लिए काम करताreturn c && c.replace(/\bcolor-\S+/g, '');

— ssmith

Answer 3

मैंने एक प्लगइन लिखा है जो इसे changeClass कहते हैं - वाइल्डकार्ड मिलान के साथ तत्व कक्षाएं निकालें। वैकल्पिक रूप से कक्षाएं जोड़ें: https://gist.github.com/1517285

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )

Comments

वास्तव में बहुत अच्छा ... मुझे कुछ कोड का पुन: उपयोग करने में मदद मिली जहां मुझे Twitter Boostrapइस तरह की कक्षाएं हटाने की आवश्यकता थी :$(".search div").children('div').alterClass('span* row-fluid');

— लेनियल मैककैफ्री

Answer 4

मैंने इसे एक Jquery प्लगइन में सामान्यीकृत किया है जो एक तर्क के रूप में एक रेगीक्स लेता है।

कॉफ़ी:

$.fn.removeClassRegex = (regex) ->
  $(@).removeClass (index, classes) ->
    classes.split(/\s+/).filter (c) ->
      regex.test c
    .join ' '

जावास्क्रिप्ट:

$.fn.removeClassRegex = function(regex) {
  return $(this).removeClass(function(index, classes) {
    return classes.split(/\s+/).filter(function(c) {
      return regex.test(c);
    }).join(' ');
  });
};

तो, इस मामले के लिए, उपयोग होगा (दोनों कॉफी और जावास्क्रिप्ट):

$('#hello').removeClassRegex(/^color-/)

ध्यान दें कि मैं Array.filterIE <9 में मौजूद फ़ंक्शन का उपयोग नहीं कर रहा हूं । आप इस WTFPL की तरह एक पॉलीफ़िल के बदले अंडरस्कोर के फिल्टर फ़ंक्शन या Google का उपयोग कर सकते हैं ।

Answer 5

यदि आप इसे अन्य स्थानों पर उपयोग करना चाहते हैं, तो मैं आपको एक सुझाव देता हूं। यह मेरे लिए ठीक काम कर रहा है।

 $.fn.removeClassStartingWith = function (filter) {
    $(this).removeClass(function (index, className) {
        return (className.match(new RegExp("\\S*" + filter + "\\S*", 'g')) || []).join(' ')
    });
    return this;
};

उपयोग:

$(".myClass").removeClassStartingWith('color');

Answer 6

हम सभी वर्गों को .attr("class"), और ऐरे, और लूप और फिल्टर तक प्राप्त कर सकते हैं :

var classArr = $("#sample").attr("class").split(" ")
$("#sample").attr("class", "")
for(var i = 0; i < classArr.length; i ++) {
    // some condition/filter
    if(classArr[i].substr(0, 5) != "color") {
        $("#sample").addClass(classArr[i]);
    }
}

डेमो: http://jsfiddle.net/L2A27/1/

Comments

जोड़ा var prefix='color';और बदल दिया ...if (classArr[i].substr(0, prefix.length) != prefix)

— अमीर सी

Answer 7

@ कम्पन के उत्तर के समान , यहाँ @ कोबी का उत्तर एक प्लगइन के रूप में है जो उपसर्गों या प्रत्ययों से मेल खाएगा।

• पूर्व) स्ट्रिप्स btn-miniऔर btn-dangerनहीं बल्कि btnजब stripClass("btn-")।
• पूर्व) स्ट्रिप्स horsebtnऔर cowbtnलेकिन नहीं btn-miniया btnजबstripClass('btn', 1)

कोड:

$.fn.stripClass = function (partialMatch, endOrBegin) {
    /// <summary>
    /// The way removeClass should have been implemented -- accepts a partialMatch (like "btn-") to search on and remove
    /// </summary>
    /// <param name="partialMatch">the class partial to match against, like "btn-" to match "btn-danger btn-active" but not "btn"</param>
    /// <param name="endOrBegin">omit for beginning match; provide a 'truthy' value to only find classes ending with match</param>
    /// <returns type=""></returns>
    var x = new RegExp((!endOrBegin ? "\\b" : "\\S+") + partialMatch + "\\S*", 'g');

    // https://stackoverflow.com/a/2644364/1037948
    this.attr('class', function (i, c) {
        if (!c) return; // protect against no class
        return c.replace(x, '');
    });
    return this;
};

https://gist.github.com/zaus/6734731

Comments

रिकॉर्ड के लिए, मैं असहमत हूं कि यह सरल है।

— जूल

@ मुझे बहुत खेद है, मेरा मतलब है कि सामान्य उपयोग (यानी उपसर्ग और प्रत्यय) में सरल है , क्योंकि आपको हर बार एक

— रेक्सक्स

मैं अब भी असहमत हूं। अपनी विधि के साथ आपको प्रलेखन पढ़ना होगा और याद रखना होगा कि वास्तव में क्या endOrBeginहोना चाहिए। यह आत्म-व्याख्यात्मक नहीं है। Regex लिखने में क्या मुश्किल है? /^match-at-start/और /match-at-end$/हर JS डेवलपर के लिए जाने जाते हैं। लेकिन प्रत्येक अपने स्वयं के लिए।

— कांप

अन्य की तुलना में भीख माँग regexes गाली @tremby, एक गैर regex विकल्प और अधिक बारीकी से की मौजूदा हस्ताक्षर से मेल खाता है addClass, removeClassऔर toggleClassहै, जो हर jQuery डेवलपर के लिए जाना जाता है। प्रलेखन पढ़ने में क्या मुश्किल है? ;)

— ०१

प्रलेखन पढ़ने के बारे में कुछ भी मुश्किल नहीं है, लेकिन जैसा कि @tremby कहते हैं, उनका समाधान स्वयं-व्याख्यात्मक है, जबकि आपके लिए प्रलेखन की आवश्यकता होती है। स्व-व्याख्यात्मक समाधान परिभाषा द्वारा उपयोग करने के लिए सरल हैं।

— फ्रांसिस्को हॉज

Answer 8

एक jQuery प्लगइन के लिए यह प्रयास करें

$.fn.removeClassLike = function(name) {
    return this.removeClass(function(index, css) {
        return (css.match(new RegExp('\\b(' + name + '\\S*)\\b', 'g')) || []).join(' ');
    });
};

या यह

$.fn.removeClassLike = function(name) {
    var classes = this.attr('class');
    if (classes) {
        classes = classes.replace(new RegExp('\\b' + name + '\\S*\\s?', 'g'), '').trim();
        classes ? this.attr('class', classes) : this.removeAttr('class');
    }
    return this;
};

Answer 9

ARS81 के उत्तर के आधार पर (जो केवल कक्षा के नाम से शुरू होता है), यहां अधिक लचीला संस्करण है। इसके अलावा एक hasClass()रेगेक्स संस्करण।

उपयोग: $('.selector').removeClassRegex('\\S*-foo[0-9]+')

$.fn.removeClassRegex = function(name) {
  return this.removeClass(function(index, css) {
    return (css.match(new RegExp('\\b(' + name + ')\\b', 'g')) || []).join(' ');
  });
};

$.fn.hasClassRegex = function(name) {
  return this.attr('class').match(new RegExp('\\b(' + name + ')\\b', 'g')) !== null;
};

Answer 10

यह सभी वर्ग नामों को प्रभावी ढंग से हटा देगा जो prefixकि नोड की classविशेषता से शुरू होते हैं । अन्य उत्तर एसवीजी तत्वों का समर्थन नहीं करते (जैसा कि यह लिख रहा है), लेकिन यह समाधान करता है:

$.fn.removeClassPrefix = function(prefix){
    var c, regex = new RegExp("(^|\\s)" + prefix + "\\S+", 'g');
    return this.each(function(){
        c = this.getAttribute('class');
        this.setAttribute('class', c.replace(regex, ''));
    });
};

Comments

क्या RegExpप्रत्येक कॉलबैक से एक बार ऑब्जेक्ट बनाने के लिए यह अधिक कुशल नहीं होगा ?

— एमिल बर्जरॉन

@EmileBergeron - हाँ यह होगा! मैं बदलाव करूंगा

— vsync

Answer 11

मेरे पास एक ही मुद्दा था और निम्नलिखित के साथ आया था जो अंडरस्कोर के _.फिल्टर विधि का उपयोग करता है। एक बार जब मुझे पता चला कि removeClass एक फ़ंक्शन लेता है और आपको क्लासनेम की एक सूची प्रदान करता है, तो यह आसान था कि इसे ऐरे में बदलें और क्लासनेम को फ़िल्टर करके वापस निकालेंClass विधि पर वापस लौटें।

// Wildcard removeClass on 'color-*'
$('[class^="color-"]').removeClass (function (index, classes) {
  var
    classesArray = classes.split(' '),
    removeClass = _.filter(classesArray, function(className){ return className.indexOf('color-') === 0; }).toString();

  return removeClass;
});

Comments

क्या आप बता सकते हैं कि अंडरस्कोर _.filter में क्या करता है

— बार्ट करें

Answer 12

आप Element.classList का उपयोग करके वेनिला जावास्क्रिप्ट के साथ भी ऐसा कर सकते हैं । या तो एक नियमित अभिव्यक्ति का उपयोग करने की कोई आवश्यकता नहीं है:

function removeColorClasses(element) { for (let className of Array.from(element.classList)) if (className.startsWith("color-")) element.classList.remove(className); }

नोट: ध्यान दें कि हम शुरू होने Arrayसे classListपहले की एक प्रति बनाते हैं , यह महत्वपूर्ण है क्योंकि classListएक लाइव है DomTokenListजो कक्षाओं को हटा दिए जाने के बाद अपडेट होगा।

Answer 13

आप classNameतत्व के DOM ऑब्जेक्ट की संपत्ति का उपयोग भी कर सकते हैं :

var $hello = $('#hello');
$('#hello').attr('class', $hello.get(0).className.replace(/\bcolor-\S+/g, ''));

Answer 14

एक सामान्य कार्य जो किसी भी वर्ग को शुरू करने से हटाता है begin:

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

http://jsfiddle.net/xa9xS/2900/

var begin = 'color-';

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

removeClassStartingWith($('#hello'), 'color-');

console.log($("#hello")[0].className);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello" class="color-red color-brown foo bar"></div>

Answer 15

शब्द सीमा पर एक रेगेक्स विभाजन इसके \bलिए सबसे अच्छा समाधान नहीं है:

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ");

या jQuery मिक्सिन के रूप में:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = classes.join(" ");
    });
    return this;
};

Answer 16

यदि आपके पास एक से अधिक तत्व हैं जिनका नाम 'उदाहरण' है, तो उन सभी के रंग '-इन' को हटाने के लिए आप यह कर सकते हैं: [jquery का उपयोग करके]

var objs = $('html').find('.example');
for(index=0 ; index < obj1s.length ; index++){
    objs[index].className = objs[index].className.replace(/col-[a-z1-9\-]*/,'');
}

यदि आप अपने regex में [a-z1-9 -] * नहीं डालते हैं तो यह उन वर्गों को नहीं हटाएगा जिनके नाम में एक संख्या या कुछ '-' हैं।

Answer 17

यदि आपको अंतिम सेट रंग निकालने की आवश्यकता है, तो निम्नलिखित आपके अनुरूप हो सकता है।

मेरी स्थिति में, मुझे एक क्लिक ईवेंट पर बॉडी टैग में एक रंग वर्ग जोड़ने और अंतिम रंग को सेट करने के लिए निकालने की आवश्यकता थी। उस स्थिति में, आप वर्तमान रंग को संग्रहीत करते हैं, और फिर अंतिम सेट रंग को निकालने के लिए डेटा टैग को देखते हैं।

कोड:

var colorID = 'Whatever your new color is';

var bodyTag = $('body');
var prevColor = bodyTag.data('currentColor'); // get current color
bodyTag.removeClass(prevColor);
bodyTag.addClass(colorID);
bodyTag.data('currentColor',colorID); // set the new color as current

हो सकता है कि वास्तव में आपको क्या चाहिए, लेकिन मेरे लिए यह नहीं था और यह पहला एसओ प्रश्न था जिसे मैंने देखा, इसलिए सोचा कि अगर मैं किसी को मदद करता हूं तो मैं अपने समाधान को साझा करूंगा।

Comments

यह बात अप्रासंगिक है। आप अपने स्वयं के प्रश्न का उत्तर दे सकते थे क्योंकि यह एसओ पर एक प्रोत्साहित व्यवहार है।

— एमिल बर्जरोन

@ ईमाइल: यह सच है। मैं ऐसा कर सकता हूं क्योंकि यह सीधे मूल प्रश्न का उत्तर नहीं दे रहा है। क्या मुझे इस उत्तर को छोड़ देना चाहिए या इसे हटा देना चाहिए?

— Redfox05

उस बिंदु पर, यह आपके अपने जोखिम पर है, यह अभी तक न तो मतदान हुआ था और न ही अपग्रेड किया गया था। इसलिए आप इसे जोखिम के बिना अपने स्वयं के प्रश्न पर स्थानांतरित कर सकते हैं। इसके अलावा, अगर यह पहले से ही एक सवाल है, तो जाँच से डुप्लिकेट से बचने की कोशिश करें।

— एमिल बर्जरॉन

Answer 18

इस समस्या से संपर्क करने का एक वैकल्पिक तरीका डेटा विशेषताओं का उपयोग करना है, जो प्रकृति द्वारा अद्वितीय हैं।

आप एक तत्व का रंग निर्धारित करेंगे जैसे: $el.attr('data-color', 'red');

और आप इसे css में स्टाइल करेंगे जैसे: [data-color="red"]{ color: tomato; }

यह वर्गों का उपयोग करने की आवश्यकता को नकारता है, जिसमें पुरानी कक्षाओं को हटाने की आवश्यकता का दुष्प्रभाव है।