jquery - 使用 jQuery 和 regExp 删除特定类

Question

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

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

当您单击社交图标时，它们会与主页链接（徽标）一起消失，并且导航的其余部分会失去其颜色。基本上我的脚本是在导航的其余部分添加一个 twitter-color 类和 Facebook-color 类，这会破坏它。当单击社交图标时，我不希望我的脚本向导航添加任何类，我很难弄清楚。

谢谢

Answer 1

试试这个（jsFiddle 演示）：

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

它使用.removeClass()with 一个函数来仅删除一些类，.split()并.join()解析class属性，并.test()检查每个类是否以“-color”结尾。它用于$.grep过滤currentClasses到函数返回的那些true，以便获得一个仅包含要删除的类的数组。

我假设您确实想删除以“-color”结尾的类，但如果您想删除名称中任何位置包含“-color”的类，只需更改/-color$/为/-color/.

Answer 2

试试这个 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 3

一种比需要稍微复杂的选项是：

$('#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 小提琴演示。

虽然很明显，替换#demo为#twitter, #facebook.

Answer 4

将函数作为参数传递给 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;
}

这应该够了吧