jQuery RemoveClass () pero no ciertas clases

Question

¿Cómo puedo eliminar todas las clases de un elemento excepto ciertas clases? Supongo que no podemos usar no con removeClass(). Digamos que tengo un <div class="aa bb cc dd ee ff"></div> y quiero eliminar todas las clases excepto aa dd. Cómo puedo hacer esto.

Answer 1

¿Por qué no solo reemplaza el atributo de clase con las clases que quieres?

$('#yourElement').attr('class',"aa dd");

Answer 2

Para que sea un poco más limpio, podría crear un poco de extensión.

jQuery.fn.removeClassExcept = function (val) {
    return this.each(function () {
        $(this).removeClass().addClass(val);
    });
};

Entonces podrías usarlo como

$("selector").removeClassExcept("aa dd");

Aquí hay un ejemplo: http://jsfiddle.net/9xhnd/

ACTUALIZAR

Usando la lógica de Brad Christie, la actualización ahora solo mantendrá clases que originalmente estaban allí y no agregarán nuevas clases. http://jsfiddle.net/9xhnd/1/

jQuery.fn.removeClassExcept = function (val) {
    return this.each(function (index, el) {
        var keep = val.split(" "),  // list we'd like to keep
        reAdd = [],          // ones that should be re-added if found
        $el = $(el);       // element we're working on
        // look for which we re-add (based on them already existing)
        for (var c = 0; c < keep.length; c++){
          if ($el.hasClass(keep[c])) reAdd.push(keep[c]);
        }

        // drop all, and only add those confirmed as existing
        $el
          .removeClass()               // remove existing classes
          .addClass(reAdd.join(' '));  // re-add the confirmed ones
    });
};

Answer 3

.removeClass() acepta como parámetro una función que devolverá qué clases realmente eliminar.

asi que

$('div').removeClass(function(i, class){
    // variable class hold the current value of the class attribute
    var list = class.split(' '); // we create an array with the classes
    return  list.filter(function(val){ // here we remove the classes we want to keep
        return (val != 'aa' && val != 'dd');
    }).join(' '); // and return that list as a string which indicates the classes to be removed..
});

Answer 4

Puede eliminar todo y agregar los necesarios de regreso:

$('#divID').removeClass()
   .addClass('aa dd'); // add multiple classes by separating with space

Nota: Llamar removeClass() sin especificar el nombre de clase específico elimina todas las clases.

Answer 5

JQuery realmente proporciona un parámetro de devolución de llamada al método RemoveClass, por lo que podría usar una expresión regular de JavaScript simple para devolver todas las clases, excepto las que no desea eliminar:

$('#myDiv').removeClass(function() {
    return $(this).attr('class').replace(/aa|bb/g, '');
});

De esta manera, no agrega clases 'AA' y 'BB' si aún no existen.

Puedes verlo en acción aqui: http://jsfiddle.net/sr86u/3/

Answer 6

Una forma en que puede hacerlo es simplemente sobrescribir todas las clases con la clase que desea mantener. Entonces, si tu DIV tiene una identificación de "MyDiv", entonces podrías hacer:

$('#myDiv').attr('class', 'aa dd');

Answer 7

Si sabe qué clases desea mantener, puede volver a agregarlas (como otros ya han mostrado).

Sin embargo, asumiré que no se sabe si esas clases ya se aplican, así que lo llevaré un paso más allá:

var keep = ['aa','bb'],  // list we'd like to keep
    reAdd = [],          // ones that should be re-added if found
    $el = = $(el);       // element we're working on

// look for which we re-add (based on them already existing)
for (var c = 0; c < keep.length; c++){
  if ($el.hasClass(keep[c])) reAdd.push(keep[c]);
}

// drop all, and only add those confirmed as existing
$el
  .removeClass()               // remove existing classes
  .addClass(reAdd.join(' '));  // re-add the confirmed ones