Question

我正在尝试查找所有包含字符'-color'的类，然后删除找到的类。

我有一堆类blue-color和red-color。我想使用正则表达式选择所有类名。我已经阅读了很多帖子，但还没有找到如何让它在我的情况下工作。

当您点击社交图标时，它们会与主页链接（徽标）一起消失，导航的其余部分会丢失其颜色。基本上我的脚本是在其他导航中添加一个twitter颜色类和Facebook颜色类来打破它。我不希望我的脚本在点击社交图标时向导航栏添加任何类，并且我很难想出来。

谢谢

Answer 1

将函数作为参数传递给remove类：

function (index_in,classes_in){
    var classes = classes_in.split(" ");
    for(var i=0; i < classes.length ; i++)
       if(!/.*-color.*/.test(classes[i]))
          classes.splice(i,1);
    var toRemove = classes.join(" "); 
    return toRemove;
}

应该做的伎俩

Answer 2

试试这个（jsFiddle demo）：

$("#facebook, #twitter").removeClass(function(_, currentClassValue) {
    var currentClasses = currentClassValue.split(/\s+/);
    var classesToRemove = $.grep(currentClasses, function(currentClass) {
        return /-color$/.test(currentClass);
    });
    return classesToRemove.join(" ");
});

它使用.removeClass()一个函数只删除一些类，.split()和.join()来解析class属性，.test()来检查每个类类以“-color”结尾。它使用$.grep将currentClasses过滤为函数返回true的函数，以便获取要删除的类的数组。

我认为您确实要删除结束的类“-color”，但是如果您要删除包含“-color”的类，请在名称，只需将/-color$/更改为/-color/。

Answer 3

试试这个Jquery选择器http://api.jquery.com/attribute-contains-selector/

    $(function(){
        $("[class*='-color']").each(function(){        
             $('#facebook,#twitter').removeClass($(this).attr("class"));
         });  

         $('#facebook,#twitter').addClass('anotherClass');
    });

JSFiddle

Answer 4

一个选项，比需要的稍微复杂一点：

$('#demo').find('[class]').attr('class', function(_, c) {
    var classes = c.split(/\s+/);
    for (var i = classes.length - 1; i >= 0; i--) {
        if (classes[i].indexOf('-color') > -1) {
            classes[i] = '';
        }
    }
    return classes.join(' ');
});

JS Fiddle demo

虽然很明显，但请将#demo替换为#twitter, #facebook。

使用jQuery和regEx删除特定的类

4 个答案: