Rimuovi tutte le classi che iniziano con una determinata stringa

Ho un div con id="a" che può avere un numero qualsiasi di classi ad esso associato, da diversi gruppi. Ogni gruppo ha un prefisso specifico. Nella javascript, non so quale class del gruppo si trovi sul div. Voglio essere in grado di cancellare tutte le classi con un dato prefisso e poi aggiungerne uno nuovo. Se voglio rimuovere tutte le classi che iniziano con “bg”, come faccio? Qualcosa di simile, ma funziona davvero:

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

Con jQuery, l’effettivo elemento DOM è a zero indice, questo dovrebbe funzionare

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

Una regex che si divide sul limite della parola \b non è la soluzione migliore per questo:

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

o come mix di jQuery:

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

Ho scritto un semplice plugin jQuery – alterClass , che rimuove la class jolly. Aggiungerà facoltativamente anche le lezioni.

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

Non hai bisogno di alcun codice jQuery specifico per gestire questo. Basta usare un RegExp per sostituirli:

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

È ansible modificare questo per supportare qualsiasi prefisso, ma il metodo più veloce è sopra in quanto il RegExp verrà compilato una sola volta:

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

Utilizzando la seconda firma di $.fn.removeClass :

 // Considering: var $el = $('
'); function makeRemoveClassHandler(regex) { return function (index, classs) { return classs.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' '); } } $el.removeClass(makeRemoveClassHandler(/^foo-/)); //> [
​]

http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html dice:

… e .removeClass () rimuovono tutte le classi …

Per me funziona 😉

Saluti

Stavo cercando la soluzione esattamente per lo stesso problema. Per rimuovere tutte le classi che iniziano con il prefisso “fontid_” Dopo aver letto questo articolo ho scritto un piccolo plugin che sto usando ora.

 (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)); 

Uso:

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

Un approccio che userei usando semplici costrutti jQuery e funzioni di gestione dell’array, è quello di dichiarare una funzione che prende l’id del controllo e il prefisso della class e cancellati tutti in class. Il codice è allegato:

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

Ora questa funzione può essere richiamata da qualsiasi luogo, onclick del pulsante o dal codice:

 removeclasss("a","bg"); 

So che è una vecchia domanda, ma ho scoperto una nuova soluzione e voglio sapere se ha degli svantaggi?

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

La risposta di Prestaul è stata utile, ma non ha funzionato abbastanza per me. Il modo jQuery per selezionare un object con ID non ha funzionato. Dovevo usare

 document.getElementById("a").className 

invece di

 $("#a").className 

Uso anche il trattino ‘-‘ e le cifre per il nome della class. Quindi la mia versione include ‘\ d-‘

 $('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, ''); 
 (function($) { return this.each(function() { var classs = $(this).attr('class'); if(!classs || !regex) return false; var classArray = []; classs = classs.split(' '); for(var i=0, len=classs.length; i 

In una riga … Rimuove tutte le classi che corrispondono a un’espressione regolare someRegExp

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