jQuery - 删除所有类名相似的类

Question

有没有更好的方法来做这件事？

$('element').removeClass('class-1').removeClass('class-2').removeClass('class-3').removeClass('class-5') ...
to .removeClass('class-105')
:)

我想要移除所有类名为class-(n)的class。

- user445228

Answer 1

这是我用于此目的的一个小型jQuery插件：

(function($) {
    $.fn.removeClassWild = function(mask) {
        return this.removeClass(function(index, cls) {
            var re = mask.replace(/\*/g, '\\S+');
            return (cls.match(new RegExp('\\b' + re + '', 'g')) || []).join(' ');
        });
    };
})(jQuery);

你可以像这样使用它：

$(...).removeClassWild('class-*');

- ThiefMaster

Answer 2

获取元素的类，将其作为字符串处理并放回：

$('element').attr(
  'className',
  $('element').attr('className').replace(/\bclass-\d+\b/g, '')
);

编辑：

attr方法已经改变，它不再读取属性，所以你需要使用属性名class而不是属性名className：

$('element').attr(
  'class',
  $('element').attr('class').replace(/\bclass-\d+\b/g, '')
);

- Guffa

---

选择器会针对每个元素进行操作，我会这样编写代码：$('element').attr('className', function(i, c) { return c.replace(/\bclass-\d+\b/g, ''); });​。 - Nick Craver

@Nick Craver：是的，如果你需要将它应用到多个元素上，那将会很有用。 :) - Guffa

属性必须是 "class"，而不是 "className"。例如：$('element').attr( 'class', $('element').attr('class').replace(/\bclass-\d+\b/g, '')); - t1gor

@t1gor：自回答发布以来，attr方法已经发生了变化。我编辑了答案，包括适用于jQuery的后续版本的代码。 - Guffa

Answer 3

使用CSS选择器更好的方式进行，[type*=value]

$(function() {
    var i = 0;
    while( ++i <= 105) {
        $('b').addClass('class-'+ i);
    }
  var clas = '';
  var arey =[]
    $('input[type=button]').click(function() {  
        clas = $('b').attr('class');
        arey = clas.match(/class-\d{1,3}/g);
        $.each(arey, function(i, e) {
            $('b').removeClass(e);      
        });
    });
}); 

编辑：

演示：http://jsbin.com/opebu4/2

- user372551

---

这将假设每个元素只有一个以 class- 开头的类，并且它们在文档中按照完美的数字顺序出现。我认为这不是问题的重点。 - user113716

@patrick，是的，你说得对。使用相同的选择器有更好的方法吗？我只是好奇想知道。 - user372551

@Nick Cravers的答案（在被接受的答案下的评论中）可能是最好的方法，尽管它需要jQuery 1.4或更高版本。我将发布一个适用于jQuery 1.4之前版本的答案。 - user113716

是的，如果你只有一个元素，那似乎可以工作。如果有多个元素，则需要将代码放置在 .each() 中，并逐个操作每个元素。有点复杂，但应该可以工作。 :o) - user113716

Answer 4

...或者，如果您知道要删除的可能类名，可以使用以开头的选择器。任务中让人困扰的部分是要查找的类的数量之多...

$(document).ready(function () {
     var classesOfInterest = '';
     for(var i = 1; i<=105; i++)
        classesOfInterest += ' ' + 'class-' + i;
     alert(classesOfInterest);
     $("[class^='class-']").removeClass(classesOfInterest);
  });

- Tahbaza