एक निश्चित स्ट्रिंग के साथ शुरू होने वाली सभी कक्षाएं निकालें

Question

मेरे पास एक div है जिसमें id="a"कई समूहों से किसी भी संख्या में कक्षाएं जुड़ी हो सकती हैं। प्रत्येक समूह में एक विशिष्ट उपसर्ग होता है। जावास्क्रिप्ट में, मुझे नहीं पता कि समूह से कौन सा वर्ग div पर है। मैं किसी दिए गए उपसर्ग के साथ सभी वर्गों को साफ़ करने में सक्षम होना चाहता हूं और फिर एक नया जोड़ना चाहता हूं। यदि मैं "बीजी" से शुरू होने वाली सभी कक्षाओं को हटाना चाहता हूं, तो मैं यह कैसे कर सकता हूं? कुछ इस तरह, लेकिन यह वास्तव में काम करता है:

$("#a").removeClass("bg*");

Answer 1

JQuery के साथ, वास्तविक DOM तत्व सूचकांक शून्य पर है, यह काम करना चाहिए

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');

Comments

इस एक के साथ सावधान। डैश कैरेक्टर ('-') और डॉट्स और अन्य पर शब्द सीमा विभाजन होता है, इसलिए "bg.a", "bg-a" आदि जैसे क्लास के नाम हटाए नहीं जाएंगे बल्कि ".a", "-a" आदि को हटा दिया जाएगा। तो अगर आपके पास विराम चिह्नों के साथ वर्गनाम हैं, तो आप साधारण रीगेक्स रिप्लेसमेंट चलाकर मुसीबत में पड़ सकते हैं। यहाँ शब्द सीमा परिभाषा के बारे

— जैकब पी।

स्प्लिट ('') और इंडेक्सऑफ के साथ नीचे कबीर सरीन का जवाब बेहतर IMO है क्योंकि यह उन विशेष-वर्गीकृत "ज़ोंबी" कक्षाओं को पॉप अप करने का कारण नहीं होगा।

— जैकब पी।

इस विधि का उपयोग अभी भी एक बेहतर रेगेक्स के साथ किया जा सकता है, जैसे कि यहाँ पाया गया: stackoverflow.com/a/2644364/1333402

— ssmith

Answer 2

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

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

या 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 = $.trim(classes.join(" "));
    });
    return this;
};

2018 ES6 अपडेट:

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

Comments

यह RegExp with \ b (शब्द सीमा जांच) का उपयोग करने से बेहतर है क्योंकि यह 'ज़ोंबी वर्गों' को पॉप अप करने से रोकता है। यदि आपके पास "उपसर्ग-प्रत्यय" जैसी कक्षाएं हैं, तो इस थ्रेड में 'सबसे अच्छा जवाब' क्लास '-सुफीक्स' को छोड़ देगा क्योंकि \ _ '' चार से पहले विभाजित हो जाएगा। आपका स्प्लिट-मैप-जॉइन सॉल्यूशन उसी के आसपास काम करता है :) मैंने आपके समाधान के चारों ओर एक छोटा jQuery प्लगइन बनाया, कबीर: ( gist.github.com/2881585 )

— जैकब पी।

+1 मैं अच्छी तरह से सहमत हूं, हर दूसरे उत्तर में बस एक साधारण रेगीक्स प्रतीत होता है जो गैर-स्थान शब्द सीमाओं पर टूट जाएगा। यदि मेरे पास कल का समय है तो मैं एक यूनिट परीक्षण की आपूर्ति करूंगा जो यह साबित करता है।

— जार्ज 14'12

मुझे यह पसंद है, हालांकि यह वास्तव में मान्य कोड नहीं है, क्योंकि अनाम फ़ंक्शन को filterबूलियन वापस करना होगा। यह काम करेगा:var classes = $(e).attr("class").split(" "); $(classes).each(function(i, item) { classes[i] = item.indexOf("prefix") === -1 ? item : "prefix-new"); }); $(e).attr("class", classes.join(" "));

— टिम

एक अधिक वैध समाधान मानचित्र का उपयोग करता है:$e.attr('class', $.map($e.attr('class').split(' '), function (klass) { return klass.indexOf(prefix) != 0 ? klass : undefined; }).join(' '));

— एम मिलर

यह दृष्टिकोण सबसे अच्छा काम करता है। मैंने @ JakubP के प्लगइन का उपयोग किया। एक सुझाव अगर मैं कर सकता हूं: यह क्या करता है, जब यह अब कक्षाएं वापस करता है, तो यह बहुत अधिक स्थान का कारण बनता है। उदाहरण के लिए अगर आप दौड़ेंगे तो class="blackRow blackText orangeFace blackHead"वापस आ जाएंगे । मैंने इसे इस तरह से परिणाम को ट्रिम करके हल किया :। class=" orangeFace "removeClassPrefix("black");el.className = $.trim(classes.join(" "));

— अल्बर्ट

Answer 3

मैंने एक साधारण jQuery प्लगइन लिखा है - ChangeClass , जो वाइल्डकार्ड वर्ग हटाने का काम करता है। वैकल्पिक रूप से कक्षाएं भी जोड़ेंगे।

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

Comments

धन्यवाद पीट! बस अपने प्लगइन का इस्तेमाल किया है और यह बहुत अच्छा काम करता है ... मुझे कुछ समय बचाया!

— jordan.baucke

Answer 4

इसे संभालने के लिए आपको किसी jQuery के विशिष्ट कोड की आवश्यकता नहीं है। उन्हें बदलने के लिए बस एक RegExp का उपयोग करें:

$("#a").className = $("#a").className.replace(/\bbg.*?\b/g, '');

आप इसे किसी भी उपसर्ग का समर्थन करने के लिए संशोधित कर सकते हैं लेकिन तेज़ तरीका ऊपर है क्योंकि RegExp केवल एक बार संकलित किया जाएगा:

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

Answer 5

2 के हस्ताक्षर का उपयोग करना $.fn.removeClass:

// Considering:
var $el = $('<div class="  foo-1 a b foo-2 c foo"/>');

function makeRemoveClassHandler(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [<div class=​"a b c foo">​</div>​]

Comments

JQuery v1.4 के बाद से, यह सबसे अच्छा तरीका है।

— दीनी

Answer 6

http://www.mail-archive.com/[e-mail]/msg03998.html कहता है:

... और .removeClass () सभी वर्गों को हटा देगा ...

इससे मेरा काम बनता है ;)

चियर्स

Comments

यह एक बेहतर विकल्प है! काम करता है।

— अफशीन मेहरबानी

सवाल यह नहीं पूछता कि सभी वर्गों को कैसे हटाया जाए, यह पूछता है कि एक निश्चित स्ट्रिंग के साथ शुरुआत करने वाले सभी वर्गों को कैसे हटाया जाए। ये दोनों चीजें बहुत अलग हैं, बहुत अलग हैं।

— क्रिस हैरिसन

Answer 7

एक दृष्टिकोण जो मैं सरल jQuery के निर्माण और सरणी हैंडलिंग कार्यों का उपयोग कर रहा हूं, वह एक फ़ंक्शन की घोषणा करना है जो कक्षा के नियंत्रण और उपसर्ग का आईडी लेता है और सभी वर्गीकृत को हटा दिया जाता है। कोड संलग्न है:

function removeclasses(controlIndex,classPrefix){
    var classes = $("#"+controlIndex).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix)==0) {
            $("#"+controlIndex).removeClass(classes[index]);
        }
    });
}

अब इस फंक्शन को कहीं से भी बुलाया जा सकता है, बटन पर क्लिक करें या कोड से:

removeclasses("a","bg");

Answer 8

मैं ठीक उसी समस्या के समाधान की तलाश में था। उपसर्ग "fontid_" से शुरू होने वाली सभी कक्षाओं को हटाने के लिए इस लेख को पढ़ने के बाद मैंने एक छोटा सा प्लगइन लिखा जो मैं अभी उपयोग कर रहा हूं।

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //loop class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // if prefix not found at the beggining of class name
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // write new list excluding filtered classNames
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

उपयोग:

$('#elementId').removePrefixedClasses('prefix-of-classes_');

Comments

यह 10x अधिक लाइनों के साथ मेरे समाधान से ज्यादा कुछ नहीं है और एक कम कुशल "स्ट्रिंग" चेक के साथ शुरू होता है: - /

— sarink

Answer 9

आधुनिक ब्राउज़रों के लिए:

let element = $('#a')[0];
let cls = 'bg';

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));

Answer 10

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मुझे इसका नया हल पता चला है और जानना चाहता हूं कि क्या इसके नुकसान हैं?

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');

Answer 11

एक पंक्ति में ... सभी वर्गों को हटाता है जो एक नियमित अभिव्यक्ति someRegExp से मेल खाते हैं

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});

Answer 12

प्रेस्टुल का जवाब मददगार था, लेकिन यह मेरे लिए बहुत काम का नहीं था। आईडी द्वारा ऑब्जेक्ट का चयन करने का jQuery तरीका काम नहीं आया। मुझे इस्तेमाल करना था

document.getElementById("a").className

के बजाय

$("#a").className

Comments

या $ ("# a") [0]। क्लासनेम के रूप में। नाम केवल DOM तत्व पर उपलब्ध है और jQuery ऑब्जेक्ट पर नहीं है

— Naeem Sarfraz

यह किसी के उत्तर के लिए टिप्पणी है, उत्तर नहीं

— TJ

Answer 13

मैं वर्ग नाम के लिए हाइफ़न- 'और अंकों का भी उपयोग करता हूं। इसलिए मेरे संस्करण में 'd-' शामिल हैं

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');

Answer 14

(function($)
{
    return this.each(function()
    {
        var classes = $(this).attr('class');

        if(!classes || !regex) return false;

        var classArray = [];

        classes = classes.split(' ');

        for(var i=0, len=classes.length; i<len; i++) if(!classes[i].match(regex)) classArray.push(classes[i]);

        $(this).attr('class', classArray.join(' '));
    });
})(jQuery);

Answer 15

$("#element").removeAttr("class").addClass("yourClass");

Comments

मुझे नहीं लगता कि आपने प्रश्न को बहुत अच्छी तरह से पढ़ा है। उपयोगकर्ता केवल एक कक्षा को हटाने और दूसरे को जोड़ने के बारे में नहीं पूछ रहा था।

— एंड्रयू बार्बर

@Andrew Barber: आप सही हैं यह सही उत्तर नहीं है, लेकिन majorsk8 ने सुझाव दिया कि सभी वर्गों (निष्कासन) को कैसे साफ़ किया जाए, न कि केवल एक ही;)

— झुकाव