jQuery removeClass通配符

有没有简单的方法来删除全部匹配的类，例如，

color-*

因此，若是我有一个元素：

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

删除后，它会

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

谢谢！

---

#1楼

我将它归纳为一个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-/)

请注意，我正在使用IE <9中不存在的Array.filter函数。 您能够使用Underscore的过滤功能，也能够使用谷歌做为此WTFPL之类的polyfill 。

---

#2楼

到@ tremby的相似的答案 ，这里是@了Kobi的答案做为一个插件，将匹配前缀或后缀。

• 例如，当stripClass("btn-")时，剥离btn-mini和btn-danger但不是btn 。
• ex）剥离horsebtn和cowbtn但不是btn-mini或btn当stripClass('btn', 1)

码：

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

---

#3楼

字边界\\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;
};

---

#4楼

咱们能够经过.attr("class") ，以及Array，And循环和过滤器来获取全部类：

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

演示： http ： //jsfiddle.net/L2A27/1/

---

#5楼

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