108

我有一个 div，id="a"它可能有来自多个组的任意数量的类。每个组都有一个特定的前缀。在 javascript 中，我不知道组中的哪个类在 div 上。我希望能够清除所有具有给定前缀的类，然后添加一个新类。如果我想删除所有以“bg”开头的类，我该怎么做？像这样的东西，但实际上有效：

$("#a").removeClass("bg*");
4

16 回答 16

113

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

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

或者作为一个 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 = $.trim(classes.join(" "));
    });
    return this;
};

2018 ES6 更新：

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();
于 2012-05-31T14:17:04.637 回答
60

使用 jQuery，实际的 DOM 元素的索引为零，这应该可以

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');
于 2008-09-12T09:05:21.787 回答
30

我编写了一个简单的jQuery 插件 - alterClass，它可以删除通配符类。也可以选择添加类。

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
于 2011-12-24T12:59:24.093 回答
13

你不需要任何 jQuery 特定的代码来处理这个。只需使用 RegExp 替换它们：

$("#a").className = $("#a").className.replace(/\bbg.*?\b/g, '');

您可以修改它以支持任何前缀，但更快的方法是上面的，因为 RegExp 将只编译一次：

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}
于 2008-09-11T22:36:36.900 回答
9

使用第二个签名：$.fn.removeClass

// Considering:
var $el = $('<div class="  foo-1 a b foo-2 c foo"/>');

function makeRemoveClassHandler(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [<div class=​"a b c foo">​&lt;/div>​]
于 2013-03-05T22:13:56.740 回答
5

对于现代浏览器：

let element = $('#a')[0];
let cls = 'bg';

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));
于 2018-10-26T05:45:58.117 回答
3

我将使用简单的 jQuery 构造和数组处理函数使用的一种方法是声明一个函数，该函数采用类的控件和前缀的 id 并删除所有分类。附上代码：

function removeclasses(controlIndex,classPrefix){
    var classes = $("#"+controlIndex).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix)==0) {
            $("#"+controlIndex).removeClass(classes[index]);
        }
    });
}

现在可以从任何地方调用此函数，单击按钮或代码：

removeclasses("a","bg");
于 2015-03-12T06:00:57.890 回答
2

http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html说：

...和 ​​.removeClass() 将删除所有类...

这个对我有用 ;）

干杯

于 2009-03-09T18:03:23.273 回答
2

我正在寻找完全相同的问题的解决方案。删除所有以前缀“fontid_”开头的类 阅读完这篇文章后，我写了一个小插件，我现在正在使用它。

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //loop class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // if prefix not found at the beggining of class name
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // write new list excluding filtered classNames
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

用法：

$('#elementId').removePrefixedClasses('prefix-of-classes_');
于 2013-10-14T20:18:31.187 回答
2

在一行中...删除与正则表达式someRegExp匹配的所有类

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});
于 2017-07-03T11:23:14.157 回答
1

我知道这是一个老问题，但我找到了新的解决方案，想知道它是否有缺点？

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');
于 2012-09-28T06:54:55.710 回答
0

Prestaul 的回答很有帮助，但对我来说不太管用。通过 id 选择对象的 jQuery 方法不起作用。我不得不使用

document.getElementById("a").className

代替

$("#a").className
于 2008-09-12T01:19:49.987 回答
0

我还使用连字符'-' 和数字作为类名。所以我的版本包括 '\d-'

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');
于 2010-07-19T20:10:43.023 回答
0 
(function($)
{
    return this.each(function()
    {
        var classes = $(this).attr('class');

        if(!classes || !regex) return false;

        var classArray = [];

        classes = classes.split(' ');

        for(var i=0, len=classes.length; i<len; i++) if(!classes[i].match(regex)) classArray.push(classes[i]);

        $(this).attr('class', classArray.join(' '));
    });
})(jQuery);
于 2012-12-19T02:47:39.963 回答
0

对于那些想要仅使用 jQuery 的解决方案的人来说，转换为 jQuery 的最佳答案：

const prefix = 'prefix'
const classes = el.attr('class').split(' ').filter(c => !c.startsWith(prefix))
el.attr('class', classes.join(' ').trim())
于 2021-06-21T07:17:14.680 回答
-6 
$("#element").removeAttr("class").addClass("yourClass");
于 2013-02-13T14:22:23.487 回答