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

时间:2010-09-11 18:30:50

标签: jquery jquery-selectors

有没有更好的方法呢?

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

我想删除所有class-(n)类。

4 个答案:

答案 0 :(得分:9)

这是我用于此目的的小型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-*');

答案 1 :(得分:8)

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

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

答案 2 :(得分:1)

使用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

答案 3 :(得分:0)

...如果您知道要移除的可能类名,则可以使用starts-with selector。这项任务令人讨厌的部分是要查找的课程数量......

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