删除以string开头的所有类

Question

我有以下HTML:

<div class="cols someclass"></div> <!--like this cols1, cols2, etc..-->
<div class="columns someclass"></div> <!--like this columns1, columns2, etc...-->
<div class="col-1 someclass"></div> <!--like this col-2, col-3,etc...-->
<div class="column-1 someclass"></div> <!--like this column-2, column-3, etc...-->

如何删除以"col"？开头的所有类？

Answer 1

我相信没有jQuery魔法,所以这是我的解决方案:

$('[class*=col]').each(function() {
    this.className = $.grep(this.className.split(' '), function(el) {
        return !/^col/.test(el);
    }).join(' ');
});

小提琴

基本上,它选择col在类中具有的元素并迭代它们,迭代它们的类并删除那些以它开头的类col.

或者没有正则表达式:

$('[class*=col]').each(function() {
    this.className = $.grep(this.className.split(' '), function(cl) {
        return cl.lastIndexOf('col', 0);
    }).join(' ');
});

小提琴

使用此答案的修改版本.如果类以伪值开始,lastIndexOf则会返回,因此将删除它.如果该类没有开头,那么返回这是一个真值.您还可以使用一些额外的可读性.0colgrepcol-1return cl.lastIndexOf('col', 0) !== 0;

或者只使用正则表达式:

$('[class*=col]').each(function() {
    this.className = this.className.replace(/(^| )col[^ ]*/g, '');
});

小提琴

匹配col字符串的开头或空格后,将其与所有前导字符一起移除到另一个空格或字符串的末尾.

Referece

• jQuery.grep - 查找满足过滤函数的数组元素.原始数组不受影响.
• element.className- 获取并设置class指定元素的属性值.

当然,这个选择是不是最佳的-如果一个元素foocol的$('[class*=col]')会选择它,而是$.grep因为它不首先/正则表达式将无法将其删除col.我想不出更好的选择器(没有属性选择器来选择以空格分隔列表AFAIK中的部分字符串开头的值),但是这应该足够了.