正在删除所有以字符串开头的类

Removing all classes starting with string

本文关键字：字符串 开头 删除      更新时间：2023-09-26

我有以下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"开头的所有类？

我相信没有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

使用此答案的修改版本。如果类以错误值col开头，则lastIndexOf将返回0，因此grep将删除该值。如果类不以col开头，则返回真实值-1。您也可以使用return cl.lastIndexOf('col', 0) !== 0;来提高可读性。

或者仅使用正则表达式：

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

Fiddle

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

Referec

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

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

相关文章：