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, '');
});