web-dev-qa-db-fra.com

jQuery removeClass wildcard

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 avoir enlevé, ce serait

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

Merci!

jqueryhtml
317
atp

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 vivant: http://jsfiddle.net/xa9xS/1409/

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

J'ai écrit un plugin appelé alterClass - Supprimer les classes d'éléments avec correspondance de caractère générique. Ajoutez éventuellement des classes: https://Gist.github.com/1517285 

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

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

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 fonction Array.filter qui n'existe pas dans IE <9. Vous pouvez utiliser la fonction de filtre Underscore à la place ou Google pour un remplissage multiple comme ce WTFPL .

15
tremby

Si vous voulez l'utiliser ailleurs, 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');
8
Charly Guirao

nous pouvons obtenir toutes les classes par .attr("class"), et à 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]);
    }
}

demo: http://jsfiddle.net/L2A27/1/

4
meni181818

Similaire à answer de @ tremby, voici le answer de @ Kobi en tant que plug-in qui correspond aux préfixes ou aux suffixes.

  • ex) supprime btn-mini et btn-danger mais pas btn lorsque stripClass("btn-").
  • ex) strip horsebtn et cowbtn mais pas btn-mini ou btn quand stripClass('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

4
drzaus

Basé sur ARS81 's answer (qui correspond uniquement aux noms de classe commençant par), voici une version plus flexible. Également 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;
};
2
Pascal Polleunus

J'ai eu le même problème et a proposé ce qui suit qui utilise la méthode _.filter de soulignement. Une fois que j'ai découvert que removeClass prenait une fonction et vous fournissait une liste de noms de classe, il était facile de le transformer en tableau et de filtrer le nom de la 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;
});
2
nynyny

Cela supprimera effectivement tous les noms de classe qui commencent par prefix de l'attribut class d'un nœud. Les autres réponses ne supportent pasSVGelements (au moment de l'écriture), 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, ''));
    });
};
2
vsync

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

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

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;
};
1
ARS81

Un fractionnement de regex sur la limite de Word \b n'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 tant que 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 = classes.join(" ");
    });
    return this;
};
0
sarink

si vous avez plus d'un élément ayant un nom de classe 'exemple', pour supprimer toutes les classes de 'couleur', vous pouvez faire ceci: [using 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.

0
mohammad eslahi sani

Vous pouvez également le faire avec JavaScript JavaScript à l’aide de Element.classList . Pas besoin d'utiliser une expression régulière non plus:

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 copie Array de la classList avant de commencer, ce qui est important car classList est une variable DomTokenList active qui sera mise à jour à mesure que les classes sont supprimées.

0
kzar

Si vous devez simplement supprimer la dernière couleur définie, les éléments suivants pourraient vous convenir.

Dans ma situation, je devais ajouter une classe de couleur à la balise body lors d'un événement click 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 c’était pour moi la première SO question que j’ai examinée. J’ai donc pensé partager ma solution au cas où elle aiderait quelqu'un.

0
redfox05

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>

0
Imabot