jQuery - Remove all classes with similar names

半城伤御伤魂 提交于 2019-12-18 21:50:02

问题


Is there any better way to do this?

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

I want to remove all class-(n) classes.


回答1:


Get the classes of the element, process it as a string, and put it back:

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

Edit:

The attr method has since changed, and it no longer reads properties, so you have to use the attribute name class instead of the property name className:

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



回答2:


Here's a small jQuery plugin I'm using for this purpose:

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

You use it like this:

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



回答3:


Doing it in a better way using css selector, [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);      
        });
    });
}); 

Edit :

Demo : http://jsbin.com/opebu4/2




回答4:


...or you can use a starts-with selector if you know the possible class names you'd like to remove. The nasty part of the task is the sheer number of classes to look for...

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


来源:https://stackoverflow.com/questions/3692142/jquery-remove-all-classes-with-similar-names

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!