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

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3185192

标签

通配符

jquery