有没有什么简单的方法来删除所有匹配的类,例如,
color-*
如果我有一个元素:
<div id="hello" class="color-red color-brown foo bar"></div>
去除后,它将是
<div id="hello" class="foo bar"></div>
谢谢!
有没有什么简单的方法来删除所有匹配的类,例如,
color-*
如果我有一个元素:
<div id="hello" class="color-red color-brown foo bar"></div>
去除后,它将是
<div id="hello" class="foo bar"></div>
谢谢!
当前回答
在单词边界上拆分正则表达式\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;
};
其他回答
对于jQuery插件,试试这个
$.fn.removeClassLike = function(name) {
return this.removeClass(function(index, css) {
return (css.match(new RegExp('\\b(' + name + '\\S*)\\b', 'g')) || []).join(' ');
});
};
或者这个
$.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;
};
编辑:第二种方法应该快一点,因为它只在整个类字符串上运行一个regex替换。第一个(更短)使用jQuery自己的removeClass方法,该方法迭代所有现有的类名,并逐个测试给定的正则表达式,因此在底层,它为相同的工作执行了更多步骤。然而,在现实生活中,这种差异是可以忽略不计的。
速度比较基准
删除任何以begin开头的类的泛型函数:
function removeClassStartingWith(node, begin) {
node.removeClass (function (index, className) {
return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
});
}
http://jsfiddle.net/xa9xS/2900/
Var begin = 'color-'; 函数removeClassStartingWith(node, begin) { 节点。removeClass(函数(索引,className) { 返回(类名。(新RegExp匹配(“\ \ b”+ +“\ \ S +”开始,“g ") ) || []).加入(' '); }); } removeClassStartingWith($(' #你好'),“颜色——”); console.log($(" #你好”)[0].className); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <div id="hello" class="color-red - color-brown foo bar"></div>
你也可以使用元素的DOM对象的className属性:
var $hello = $('#hello');
$('#hello').attr('class', $hello.get(0).className.replace(/\bcolor-\S+/g, ''));
我已经写了一个插件,做这个叫做alterClass -删除元素类通配符匹配。可选地添加类:https://gist.github.com/1517285
$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
如果你只是需要去除最后一组颜色,下面的方法可能适合你。
在我的情况下,我需要在单击事件的主体标记上添加一个颜色类,并删除设置的最后一个颜色。在这种情况下,存储当前颜色,然后查找数据标记以删除最后设置的颜色。
代码:
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问题,所以我想分享我的解决方案,以防它能帮助到任何人。