jQuery removeClass joker

Existe-t-il un moyen simple de supprimer toutes les classes correspondantes, par exemple,

color-*

donc si j'ai un élément:

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

après le retrait, il serait

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

Merci!

La fonction removeClass prend un argument de fonction depuis jQuery 1.4 .

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

Exemple en direct: http://jsfiddle.net/xa9xS/1409/

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

J'ai écrit un plugin qui fait cela appelé alterClass - Supprimer les classes d'éléments avec une correspondance générique. Ajoutez éventuellement des classes: https://gist.github.com/1517285

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

J'ai généralisé cela dans un plugin Jquery qui prend un regex comme argument.

Café:

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

Javascript:

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

Donc, dans ce cas, l'utilisation serait (à la fois Coffee et Javascript):

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

Notez que j'utilise la Array.filterfonction qui n'existe pas dans IE <9. Vous pouvez utiliser la fonction de filtre Underscore à la place ou Google pour un polyfill comme celui-ci WTFPL .

Si vous souhaitez l'utiliser dans d'autres endroits, je vous suggère une extension. Celui-ci fonctionne bien pour moi.

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

Usage:

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

nous pouvons obtenir toutes les classes par .attr("class")et vers Array, And loop & filter:

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

démo: http://jsfiddle.net/L2A27/1/

Semblables à @ tremby réponse , voici @ Kobi réponse en tant que plug - in qui correspondent soit des préfixes ou suffixes.

• ex) bandes btn-miniet btn-dangermais pas btnquand stripClass("btn-").
• ex) bandes horsebtnet cowbtnmais pas btn-miniou btnquandstripClass('btn', 1)

Code:

$.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

Pour un plugin jQuery essayez ceci

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

ou ca

$.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;
};

Basé sur la réponse d' ARS81 (qui ne correspond qu'aux noms de classe commençant par), voici une version plus flexible. Aussi une version regex.hasClass()

Usage: $('.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;
};

Cela supprimera efficacement tous les noms de classe qui commencent par prefixl' classattribut d'un nœud . D'autres réponses ne prennent pas en charge les éléments SVG (au moment d'écrire ceci), mais cette solution:

$.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, ''));
    });
};

J'ai eu le même problème et j'ai trouvé ce qui suit qui utilise la méthode _.filter du soulignement. Une fois que j'ai découvert que removeClass prend une fonction et vous fournit une liste de noms de classe, il était facile de transformer cela en un tableau et de filtrer le nom de classe pour revenir à la méthode removeClass.

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

Vous pouvez également le faire avec JavaScript vanilla en utilisant Element.classList . Pas besoin non plus d'utiliser une expression régulière:

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

Remarque: notez que nous créons une Arraycopie du classListavant de commencer, c'est important car classListc'est un live DomTokenListqui se mettra à jour lorsque les classes seront supprimées.

Une fonction générique qui supprime toute classe commençant par 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>

Vous pouvez également utiliser la classNamepropriété de l'objet DOM de l'élément:

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

Un regex se divisant sur la frontière de mot \bn'est pas la meilleure solution pour cela:

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

ou en mixage 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;
};

si vous avez plusieurs éléments ayant un nom de classe 'exemple', pour supprimer les classes de 'couleur-' dans chacun d'eux, vous pouvez le faire: [en utilisant jquery]

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

si vous ne mettez pas [a-z1-9 -] * dans votre regex, cela ne supprimera pas les classes qui ont un nombre ou des '-' dans leurs noms.

Si vous avez juste besoin de supprimer la dernière couleur définie, les éléments suivants peuvent vous convenir.

Dans ma situation, je devais ajouter une classe de couleurs à la balise body sur un événement de clic et supprimer la dernière couleur définie. Dans ce cas, vous stockez la couleur actuelle, puis recherchez la balise de données pour supprimer la dernière couleur définie.

Code:

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

Ce n'est peut-être pas exactement ce dont vous avez besoin, mais pour moi, c'était le cas et c'était la première question SO que j'ai examinée, alors j'ai pensé partager ma solution au cas où cela aiderait quelqu'un.

Une autre façon d'aborder ce problème consiste à utiliser des attributs de données, qui sont par nature uniques.

Vous définiriez la couleur d'un élément comme: $el.attr('data-color', 'red');

Et vous le styleriez en CSS comme: [data-color="red"]{ color: tomato; }

Cela annule la nécessité d'utiliser des classes, ce qui a pour effet secondaire de devoir supprimer les anciennes classes.