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

color-*

如果我有一个元素:

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

去除后,它将是

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

谢谢!


当前回答

我已经写了一个插件,做这个叫做alterClass -删除元素类通配符匹配。可选地添加类:https://gist.github.com/1517285

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

其他回答

解决这个问题的另一种方法是使用数据属性,数据属性本质上是唯一的。

你可以像这样设置元素的颜色:$el。attr(“data-color”、“红色”);

你可以在css中设置它的样式:[data-color="red"]{color: tomato;}

这就否定了使用类的需要,这有需要删除旧类的副作用。

删除任何以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-'; 函数removeClassStartingWith(node, begin) { 节点。removeClass(函数(索引,className) { 返回(类名。(新RegExp匹配(“\ \ b”+ +“\ \ S +”开始,“g ") ) || []).加入(' '); }); } removeClassStartingWith($(' #你好'),“颜色——”); console.log($(" #你好”)[0].className); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <div id="hello" class="color-red - color-brown foo bar"></div>

在单词边界上拆分正则表达式\b并不是最好的解决方案:

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

或作为jQuery mixin:

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

从jQuery 1.4开始,removeClass函数就带有一个函数参数。

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

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