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(' ');
});

Fiddle

基本上，它选择在类中有col的元素并迭代它们，迭代它们的类并删除以col开头的元素。

或没有正则表达式：

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

Fiddle

使用此answer的修改版本。如果课程以lastIndexOf开头，0将返回col，这是一个假值，因此grep将删除它。如果该课程不以col开头，则返回-1，这是一个真值。您也可以使用return cl.lastIndexOf('col', 0) !== 0;获得额外的可读性。

或仅使用正则表达式：

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

Fiddle

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

Referece

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

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

删除以string开头的所有类

1 个答案:

Referece