HTML
<div class="ativo37 and many other classes"></div>
<div class="another classes here with ativo1"></div>
<div class="here ativo9 and more two or three"></div>
JS
$("div[class^='ativo']").on("click", function(){
$(this).removeClass("^='ativo'"); // How to achieve it?
});
除了.removeClass("^='ativo'");，我还能做什么？
【问题讨论】：
标签： javascript jquery
.removeClass() 接受一个删除类的函数并接受索引和旧的 CSS 值：
返回一个或多个以空格分隔的要删除的类名的函数。接收集合中元素的索引位置和旧类值作为参数。
您可以删除以所需名称开头的类名并保留现有的使用：
$("div[class*='ativo']").removeClass (function (index, css) {
return (css.match (/(^|\s)ativo\S+/g) || []).join(' ');
});
【讨论】：
$("div[class*='ativo']")
没有jQuery，你可以使用classList和startsWith：
var el = document.querySelector('div[class*="ativo"]');
for (let i = el.classList.length - 1; i >= 0; i--) {
const className = el.classList[i];
if (className.startsWith('ativo')) {
el.classList.remove(className);
}
}
【讨论】：
function removeClassByPrefix(el, prefix) {
var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
el.className = el.className.replace(regx, '');
return el;
}
您可以使用这个纯Javascript解决方案。
【讨论】：
class-name 使用“类”作为前缀，我仍然以“名称”结尾.有什么方法可以改变正则表达式来解决这个问题？
new RegExp('\\b' + prefix + '(.*)?\\b', 'g');
@str 和 @Djurdjen 的答案都有问题。如果您删除 forEach()-loop 中的类，您将删除当前正在循环的元素。例如，在 Edge 中，这可能会导致 classNamebeeing null。
更好的解决方案是向后循环classList-元素：
function removeClassesByPrefix(el, prefix)
{
for(var i = el.classList.length - 1; i >= 0; i--) {
if(el.classList[i].startsWith(prefix)) {
el.classList.remove(el.classList[i]);
}
}
}
【讨论】：
我在上面的解决方案中遇到了问题，它有时只从类名中删除了匹配的前缀，而不是整个类。所以我把它改成了这个
function removeClassByPrefix(el, prefix) {
var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
[...el.classList].forEach(className => {
regx.test(className) && item.classList.remove(className);
});
}
【讨论】：
我会这样做：
function removeClassStartsWith (node, className) {
[...node.classList].forEach(v => {
if (v.startsWith(className)) {
node.classList.remove(v)
}
})
}
用法：
// Example node: <div class="id-1"></div>
const el = document.querySelectorAll('div')[0]
removeClassStartsWith(el, 'id-')
【讨论】：
function removeClassByPrefix(el, prefix) {
let newClassList = []
el.classList.forEach(className => {
if (className.indexOf(prefix) !== 0 ) {
newClassList.push(className)
}
})
el.className = newClassList.join(' ')
}
【讨论】：
这种方法允许在没有 jquery-prerequisite 的情况下通过任何字符串过滤器删除 css 类。
node.classList.remove(
...Array.from(node.classList.entries())
.map(([,c]) => c)
.filter(c => c.startsWith('prefix')));它的作用是，使用 entries() 迭代器从类列表条目中创建一个数组。这些格式为 [index, classname]。现在我可以轻松地将它们首先映射到类名，然后使用所有类型的数组函数（如本例中的过滤器）来找到正确的类集。
【讨论】：
我编写了这个函数来使用'startsWith()'从HTMLElement中删除给定的类名
export function removeClassStartingWith(currentEl, currentClassName){
currentEl.classList.forEach((curr, index) => {
if(curr.startsWith(currentClassName)){
const currentClass = currentEl.classList[index];
currentEl.classList.remove(currentClass);
return true;
}else{
return false;
}
});
}
【讨论】：