3

我有以下 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"？

4

1 回答 1

6

我相信这没有 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在字符串的开头或空格之后匹配，将其与所有前导字符一起删除，直到另一个空格或字符串的结尾。

参考

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

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

于 2013-07-07T04:54:15.020 回答