我有一个id="a"的div，它可能有来自多个组的任意数量的类。 每个组都有一个特定的前缀。 在javascript中，我不知道该组中的哪个类位于div上。 我希望能够清除具有给定前缀的所有类，然后添加一个新的类。 如果要删除所有以" bg"开头的类，该怎么做？ 像这样的东西，但实际上有效：
1
| $("#a").removeClass("bg*"); |
在单词边界\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("").trim(); |
或作为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 = $.trim(classes.join(""));
});
return this;
}; |
2018年ES6更新：
1
2
3
| const prefix ="prefix";
const classes = el.className.split("").filter(c => !c.startsWith(prefix));
el.className = classes.join("").trim(); |
使用jQuery，实际的DOM元素的索引为零，这应该可以工作
1
| $('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, ''); |
我已经编写了一个简单的jQuery插件-alterClass，它可以删除通配符类。
也可以选择添加类。
1
| $( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' ) |
您不需要任何jQuery特定代码即可处理此问题。只需使用RegExp替换它们：
1
| $("#a").className = $("#a").className.replace(/\bbg.*?\b/g, ''); |
您可以修改它以支持任何前缀，但是更快的方法在上面，因为RegExp将仅编译一次：
1
2
3
4
5
| function removeClassByPrefix(el, prefix) {
var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
el.className = el.className.replace(regx, '');
return el;
} |
使用$.fn.removeClass的第二个签名：
1
2
3
4
5
6
7
8
9
10
11
| // Considering:
var $el = $('');
function makeRemoveClassHandler(regex) {
return function (index, classes) {
return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
}
}
$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [??] |
http://www.mail-archive.com/jquery-zh@googlegroups.com/msg03998.html说：
...和.removeClass()会删除所有类...
这个对我有用 ;)
干杯
我将使用简单的jQuery构造和数组处理函数使用的一种方法是声明一个函数，该函数采用控件的ID和类的前缀并删除所有已分类的类。附带的代码：
1
2
3
4
5
6
7
8
| function removeclasses(controlIndex,classPrefix){
var classes = $("#"+controlIndex).attr("class").split("");
$.each(classes,function(index) {
if(classes[index].indexOf(classPrefix)==0) {
$("#"+controlIndex).removeClass(classes[index]);
}
});
} |
现在，可以在任何地方，单击按钮或从代码中调用此函数：
1
| removeclasses("a","bg"); |
我一直在寻找完全相同的问题的解决方案。删除所有以前缀" fontid_"开头的类。阅读本文后，我编写了一个小插件，该插件现在正在使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| (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)); |
用法：
1
| $('#elementId').removePrefixedClasses('prefix-of-classes_'); |
对于现代浏览器：
1
2
3
4
| let element = $('#a')[0];
let cls = 'bg';
element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls))); |
我知道这是一个老问题，但是我找到了新的解决方案，想知道它是否有缺点？
1
2
3
4
| $('#a')[0].className = $('#a')[0].className
.replace(/(^|\s)bg.*?(\s|$)/g, ' ')
.replace(/\s\s+/g, ' ')
.replace(/(^\s|\s$)/g, ''); |
一行...
删除所有与正则表达式someRegExp匹配的类
1
| $('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');}); |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| (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); |
我还使用连字符'-'和数字作为类名。所以我的版本包括' d-'
1
| $('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, ''); |
Prestaul的回答很有帮助，但对我而言并不奏效。通过id选择对象的jQuery方法无效。我不得不用
1
| document.getElementById("a").className |
代替
1
| $("#element").removeAttr("class").addClass("yourClass"); |
