jQuery removeClass通配符

Question

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

color-*

所以,如果我有一个元素:

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

删除后,它会

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

谢谢!

Answer 1

该removeClass功能需要,因为函数参数的jQuery 1.4.

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

实例:http://jsfiddle.net/xa9xS/1409/

Answer 2

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

Answer 3

我编写了一个名为alterClass的插件 - 使用通配符匹配删除元素类.可选择添加类:https://gist.github.com/1517285

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

Answer 4

我将它概括为一个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(' ');
  });
};

因此,对于这种情况,使用将是(Coffee和Javascript):

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

请注意,我正在使用Array.filterIE <9中不存在的功能.您可以使用Underscore的过滤功能,也可以使用谷歌作为此WTFPL之类的polyfill.

Answer 5

如果你想在其他地方使用它我建议你扩展.这个对我来说很好.

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

用法:

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

Answer 6

对于 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;
};

编辑：第二种方法应该更快一点，因为它只对整个类字符串运行一个正则表达式替换。第一个（较短）使用 jQuery 自己的removeClass 方法，该方法迭代所有现有的类名并针对给定的正则表达式逐一测试它们，因此在幕后它为同一工作执行了更多步骤。但在现实生活中，这种差异可以忽略不计。

速度比较基准

Answer 7

删除任何以 开头的类的通用函数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/

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

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