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

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"开头的类？

- Bhojendra Rauniyar

---

在这里回答：https://dev59.com/GnVD5IYBdhLWcg3wL4mM - Kabir Sarin

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

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，并将其与所有前导字符一起删除，直到另一个空格或字符串结尾。

---

参考资料

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

---

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

- Fabrício Matté