有没有什么简单的方法来删除所有匹配的类,例如,

color-*

如果我有一个元素:

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

去除后,它将是

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

谢谢!


当前回答

类似于@tremby的答案,这里是@Kobi的答案作为一个插件,将匹配前缀或后缀。

ex)剥离btn-mini和btn-danger,但当stripClass(“btn-”)时不剥离btn。 当stripClass('btn', 1)剥离马btn和牛btn,但不剥离btn-mini或btn

代码:

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

其他回答

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

如果你只是需要去除最后一组颜色,下面的方法可能适合你。

在我的情况下,我需要在单击事件的主体标记上添加一个颜色类,并删除设置的最后一个颜色。在这种情况下,存储当前颜色,然后查找数据标记以删除最后设置的颜色。

代码:

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

可能不是你需要的,但对我来说是,这是我看到的第一个SO问题,所以我想分享我的解决方案,以防它能帮助到任何人。

我把它概括成一个Jquery插件,它把一个正则表达式作为参数。

咖啡:

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

因此,在这种情况下,使用将是(咖啡和Javascript):

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

注意,我使用的是数组。在IE<9中不存在的过滤器函数。您可以使用下划线的过滤器函数代替或谷歌的polyfill像WTFPL一个。

基于ARS81的答案(只匹配以开头的类名),这里有一个更灵活的版本。也是hasClass()正则表达式版本。

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

对于jQuery插件,试试这个

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

或者这个

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

编辑:第二种方法应该快一点,因为它只在整个类字符串上运行一个regex替换。第一个(更短)使用jQuery自己的removeClass方法,该方法迭代所有现有的类名,并逐个测试给定的正则表达式,因此在底层,它为相同的工作执行了更多步骤。然而,在现实生活中,这种差异是可以忽略不计的。

速度比较基准