有没有什么简单的方法来删除所有匹配的类,例如,
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>
谢谢!
当前回答
删除任何以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>
其他回答
$('div').attr('class', function(i, c){
return c.replace(/(^|\s)color-\S+/g, '');
});
我把它概括成一个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(' ');
});
};
因此,在这种情况下,使用将是(咖啡和Javascript):
$('#hello').removeClassRegex(/^color-/)
注意,我使用的是数组。在IE<9中不存在的过滤器函数。您可以使用下划线的过滤器函数代替或谷歌的polyfill像WTFPL一个。
基于ARS81的答案(只匹配以开头的类名),这里有一个更灵活的版本。也是hasClass()正则表达式版本。
用法:$ (' .selector ') .removeClassRegex(‘\ \ S * foo [0 - 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;
};
您也可以使用Element.classList使用普通JavaScript来实现这一点。也不需要使用正则表达式:
函数removeColorClasses(元素) { for(让数组的className从(element.classList)) 如果(className.startsWith(“颜色”)) element.classList.remove(名称); }
注意:注意我们在开始之前创建了classList的Array副本,这很重要,因为classList是一个活跃的DomTokenList,它会在类被删除时更新。
从jQuery 1.4开始,removeClass函数就带有一个函数参数。
$("#hello").removeClass (function (index, className) {
return (className.match (/(^|\s)color-\S+/g) || []).join(' ');
});
实例:http://jsfiddle.net/xa9xS/1409/