jQuery removeClass通配符
有没有简单的方法来删除所有匹配的类，例如，
color-* 所以如果我有一个元素：
<div id="hello" class="color-red color-brown foo bar"></div>
删除后，将是
<div id="hello" class="foo bar"></div>
谢谢！
removeClass函数从jQuery 1.4开始就有一个函数参数。
$("#hello").removeClass (function (index, className) { return (className.match (/(^|\s)color-\S+/g) || []).join(' '); });
现场示例： http : //jsfiddle.net/xa9xS/1409/
$('div').attr('class', function(i, c){ return c.replace(/(^|\s)color-\S+/g, ''); });
我写了一个插件，这就是所谓的alterClass – 通过匹配删除元素类。 可以select添加类： https ： //gist.github.com/1517285
$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
我已经把它推广到一个Jquery插件，它以正则expression式作为参数。
咖啡：
$.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中不存在的Array.filter函数。 你可以使用Underscore的filter函数，或者像Google 这样的WTFPL一个polyfill 。
类似@ tremby的答案 ，这里是@ Kobi的答案作为插件，将匹配前缀或后缀。
- 例如）strip
btn-mini和btn-danger但是当stripClass("btn-")不是btn时。 - 例如）带
horsebtnstripClass('btn', 1)horsebtn和cowbtn但不btn-mini或btnstripClass('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; };
如果你想在其他地方使用它，我build议你扩展。 这个对我来说工作得很好。
$.fn.removeClassStartingWith = function (filter) { $(this).removeClass(function (index, className) { return (className.match(new RegExp("\\S*" + filter + "\\S*", 'g')) || []).join(' ') }); return this; };
用法：
$(".myClass").removeClassStartingWith('color');
根据ARS81的答案 （只匹配类名开头），这里是一个更灵活的版本。 也是一个hasClass()正则expression式版本。
用法： $('.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; };
这将有效地从节点的class属性中删除以prefix开头的所有类名。 其他答案不支持SVG元素（就像写这个），但是这个解决scheme确实：
$.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属性：
var $hello = $('#hello'); $('#hello').attr('class', $hello.get(0).className.replace(/\bcolor-\S+/g, ''));
我们可以通过.attr("class")来获取所有的类，并且可以获得Array，和loop＆filter：
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/
对于一个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; };
我有同样的问题，并提出了下面的使用下划线的_.filter方法。 一旦我发现removeClass接受一个函数并为你提供了一个类名列表，很容易把它转换成一个数组，并过滤掉类名以返回到removeClass方法。
// 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; });
正则expression式在字边界\b分裂并不是最好的解决scheme：
var prefix = "prefix"; var classes = el.className.split(" ").filter(function(c) { return c.lastIndexOf(prefix, 0) !== 0; }); el.className = classes.join(" ");
或者作为一个jQuery混搭：
$.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; };
如果你有不止一个元素有一个类名'example'，要删除所有的'color-'类，你可以这样做：[using jquery]
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 – ] *放到你的正则expression式中，它不会删除名称中有一个数字或一些' – '的类。
如果你只需要删除最后设置的颜色，以下可能适合你。
在我的情况下，我需要添加一个颜色类到一个单击事件的身体标记，并删除最后设置的颜色。 在这种情况下，您将存储当前颜色，然后查找数据标签以删除最后设置的颜色。
码：
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问题，所以我想我会分享我的解决scheme，以防万一。
