我有一个 div,id="a"
它可能有来自多个组的任意数量的类。每个组都有一个特定的前缀。在 javascript 中,我不知道组中的哪个类在 div 上。我希望能够清除所有具有给定前缀的类,然后添加一个新类。如果我想删除所有以“bg”开头的类,我该怎么做?像这样的东西,但实际上有效:
$("#a").removeClass("bg*");
我有一个 div,id="a"
它可能有来自多个组的任意数量的类。每个组都有一个特定的前缀。在 javascript 中,我不知道组中的哪个类在 div 上。我希望能够清除所有具有给定前缀的类,然后添加一个新类。如果我想删除所有以“bg”开头的类,我该怎么做?像这样的东西,但实际上有效:
$("#a").removeClass("bg*");
单词边界上的正则表达式拆分\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();
使用 jQuery,实际的 DOM 元素的索引为零,这应该可以
$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');
我编写了一个简单的jQuery 插件 - alterClass,它可以删除通配符类。也可以选择添加类。
$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
你不需要任何 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;
}
使用第二个签名:$.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"></div>]
对于现代浏览器:
let element = $('#a')[0];
let cls = 'bg';
element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));
我将使用简单的 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");
http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html说:
...和 .removeClass() 将删除所有类...
这个对我有用 ;)
干杯
我正在寻找完全相同的问题的解决方案。删除所有以前缀“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_');
在一行中...删除与正则表达式someRegExp匹配的所有类
$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});
我知道这是一个老问题,但我找到了新的解决方案,想知道它是否有缺点?
$('#a')[0].className = $('#a')[0].className
.replace(/(^|\s)bg.*?(\s|$)/g, ' ')
.replace(/\s\s+/g, ' ')
.replace(/(^\s|\s$)/g, '');
Prestaul 的回答很有帮助,但对我来说不太管用。通过 id 选择对象的 jQuery 方法不起作用。我不得不使用
document.getElementById("a").className
代替
$("#a").className
我还使用连字符'-' 和数字作为类名。所以我的版本包括 '\d-'
$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');
(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);
对于那些想要仅使用 jQuery 的解决方案的人来说,转换为 jQuery 的最佳答案:
const prefix = 'prefix'
const classes = el.attr('class').split(' ').filter(c => !c.startsWith(prefix))
el.attr('class', classes.join(' ').trim())
$("#element").removeAttr("class").addClass("yourClass");