关于html：jQuery removeClass通配符


jQuery removeClass wildcard

是否有任何简单的方法来删除所有匹配的类，例如，

1
color-*

所以如果我有一个元素：

1
 

删除后，它将是

1
 

谢谢！

相关讨论

从jQuery 1.4开始，removeClass函数接受一个函数参数。

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

实时示例：http：//jsfiddle.net/xa9xS/1409/

相关讨论

1
2
3
$('div').attr('class', function(i, c){
    return c.replace(/(^|\s)color-\S+/g, '');
});
相关讨论

我编写了一个名为alterClass的插件-删除具有通配符匹配的元素类。 (可选)添加类：https://gist.github.com/1517285

1
$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
相关讨论

我已经将其概括为一个使用正则表达式作为参数的Jquery插件。

咖啡：

1
2
3
4
5
$.fn.removeClassRegex = (regex) ->
  $(@).removeClass (index, classes) ->
    classes.split(/\s+/).filter (c) ->
      regex.test c
    .join ' '

Javascript：

1
2
3
4
5
6
7
$.fn.removeClassRegex = function(regex) {
  return $(this).removeClass(function(index, classes) {
    return classes.split(/\s+/).filter(function(c) {
      return regex.test(c);
    }).join(' ');
  });
};

因此，在这种情况下，用法为(Coffee和Javascript)：

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

请注意，我使用的是Array.filter函数，该函数在IE <9中不存在。您可以改用Underscore的过滤器功能，也可以使用Google进行这种WTFPL这样的polyfill。

如果您想在其他地方使用它，我建议您扩展。这对我来说很好。

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

用法：

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

我们可以通过.attr("class")获取所有类，并获取Array，And和loop＆filter：

1
2
3
4
5
6
7
8
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/

相关讨论

与@tremby的答案类似，这是@Kobi的答案，它将作为匹配前缀或后缀的插件。

  • 例如)在stripClass("btn-")时剥离btn-mini和btn-danger，但不剥离btn。
  • 例如)在stripClass('btn', 1)时去除horsebtn和cowbtn，但不去除btn-mini或btn

码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.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

相关讨论

我遇到了同样的问题，并提出了以下使用下划线的_.filter方法的问题。一旦我发现removeClass带有一个函数并为您提供了一个类名列表，就很容易将其转换为数组并过滤掉类名以返回到removeClass方法。

1
2
3
4
5
6
7
8
// Wildcard removeClass on 'color-*'
$('[class^="color-"]').removeClass (function (index, classes) {
  var
    classesArray = classes.split(' '),
    removeClass = _.filter(classesArray, function(className){ return className.indexOf('color-') === 0; }).toString();

  return removeClass;
});
相关讨论

根据ARS81的答案(仅匹配以开头的类名)，这是一个更灵活的版本。也是hasClass()正则表达式版本。

用法：$('.selector').removeClassRegex('\\S*-foo[0-9]+')

1
2
3
4
5
6
7
8
9
$.fn.removeClassRegex = function(name) {
  return this.removeClass(function(index, css) {
    return (css.match(new RegExp('\\b(' + name + ')\\b', 'g')) || []).join(' ');
  });
};

$.fn.hasClassRegex = function(name) {
  return this.attr('class').match(new RegExp('\\b(' + name + ')\\b', 'g')) !== null;
};
相关讨论

这将有效地从节点的class属性中删除所有以prefix开头的类名。其他答案不支持SVG元素(在撰写本文时)，但是此解决方案支持：

1
2
3
4
5
6
7
$.fn.removeClassPrefix = function(prefix){
    var c, regex = new RegExp("(^|\\s)" + prefix +"\\S+", 'g');
    return this.each(function(){
        c = this.getAttribute('class');
        this.setAttribute('class', c.replace(regex, ''));
    });
};
相关讨论

您还可以使用元素的DOM对象的className属性：

1
2
var $hello = $('#hello');
$('#hello').attr('class', $hello.get(0).className.replace(/\bcolor-\S+/g, ''));

您也可以使用Element.classList使用香草JavaScript进行此操作。也无需使用正则表达式：


function removeColorClasses(element)
{
for (let className of Array.from(element.classList))
if (className.startsWith("color-"))
element.classList.remove(className);
}

注意：请注意，我们在开始之前创建了classList的Array副本，这很重要，因为classList是实时DomTokenList，它将随着类的删除而更新。

对于jQuery插件，请尝试以下操作

1
2
3
4
5
$.fn.removeClassLike = function(name) {
    return this.removeClass(function(index, css) {
        return (css.match(new RegExp('\\b(' + name + '\\S*)\\b', 'g')) || []).join(' ');
    });
};

或这个

1
2
3
4
5
6
7
8
$.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;
};

一个通用函数，它删除任何以begin开头的类：

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

http://jsfiddle.net/xa9xS/2900/

1
2
3
4
5
6
7
8
9
10
11
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);
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

如果您有多个具有类名" example"的元素，则要在所有元素中都删除" color-"类，可以执行以下操作：[使用jquery]

1
2
3
4
var objs = $('html').find('.example');
for(index=0 ; index < obj1s.length ; index++){
    objs[index].className = objs[index].className.replace(/col-[a-z1-9\-]*/,'');
}

如果您不在正则表达式中添加[a-z1-9-] *，则不会删除名称中带有数字或某些"-"的类。

在单词边界\b上进行正则表达式分割不是解决此问题的最佳方法：

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

或作为jQuery mixin：

1
2
3
4
5
6
7
8
9
$.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;
};

如果您只需要删除最后设置的颜色，则可能适合以下情况。

在我的情况下，我需要在click事件中向body标签添加颜色类，并删除最后设置的颜色。在这种情况下，您将存储当前颜色，然后查找数据标签以删除最后设置的颜色。

码：

1
2
3
4
5
6
7
var colorID = 'Whatever your new color is';

var bodyTag = $('body');
var prevColor = bodyTag.data('currentColor'); // get current color
bodyTag.removeClass(prevColor);
bodyTag.addClass(colorID);
bodyTag.data('currentColor',colorID); // set the new color as current

可能不完全是您所需要的，但对我而言，这是我所关注的第一个SO问题，因此，我认为我会分享我的解决方案，以防它对任何人有帮助。

相关讨论