javascript - todas - modificar clase js

Eliminar todas las clases que comienzan con una cierta cadena

Question

Tengo un div con id="a" que puede tener cualquier cantidad de clases asociadas, de varios grupos. Cada grupo tiene un prefijo específico. En el javascript, no sé qué clase del grupo está en el div. Quiero poder borrar todas las clases con un prefijo dado y luego agregar una nueva. Si quiero eliminar todas las clases que comienzan con "bg", ¿cómo hago eso? Algo como esto, pero que realmente funciona:

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

Answer 1

Con jQuery, el elemento DOM real está en el índice cero, esto debería funcionar

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

Answer 2

En una línea ... Elimina todas las clases que coinciden con una expresión regular someRegExp

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

Answer 3

Estaba buscando una solución para exactamente el mismo problema. Para eliminar todas las clases comenzando con el prefijo "fontid_" Después de leer este artículo escribí un pequeño complemento que estoy usando ahora.

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

Answer 4

La respuesta de Prestaul fue útil, pero no funcionó para mí. La forma jQuery de seleccionar un objeto por id no funcionó. Tuve que usar

document.getElementById("a").className

en lugar de

$("#a").className

Answer 5

No necesita ningún código específico de jQuery para manejar esto. Solo usa un RegExp para reemplazarlos:

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

Puede modificar esto para admitir cualquier prefijo, pero el método más rápido está arriba ya que el RegExp se compilará solo una vez:

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

Answer 6

Sé que es una vieja pregunta, pero descubrí una nueva solución y quiero saber si tiene desventajas.

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

Answer 7

También uso guiones y dígitos para el nombre de clase. Entonces mi versión incluye ''/ d-''

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

Answer 8

Un enfoque que usaría usando construcciones jQuery simples y funciones de manejo de matrices, es declarar una función que toma la identificación del control y el prefijo de la clase y se borra toda clasificada. El código está adjunto:

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

Ahora se puede llamar a esta función desde cualquier lugar, haciendo clic en el botón o desde el código:

removeclasses("a","bg");

Answer 9

Una división de expresiones regulares en el límite de palabras /b no es la mejor solución para esto:

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

o como una mixin 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;
};

Answer 10

Usando la segunda firma de $.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>​]

Answer 11

http://www.mail-archive.com/[email protected]/msg03998.html dice:

... y .removeClass () eliminaría todas las clases ...

Esto funciona para mi ;)

aclamaciones

Answer 12

Escribí un plugin de jQuery simple : alterClass , que elimina la clase de comodín. Opcionalmente agregará clases también.

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

Answer 13

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

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