使用jquery从多个元素中删除多个类

此$代码和和jsfiddle链接中链接的animate.css将动画效果添加到框或图像。使用jquery从多个元素中删除多个类

$('.box1').addClass('animated bounceInUp');

增加了动画类和效果类。

$('.box1').removeClass('animated bounceInUp');

删除类。

这里的问题是我打算使用不少于100盒/图像，所以应该有一种方法来同时添加/删除所有动画和效果类。

这是我目前使用的代码和的jsfiddle：

jsfiddle

$(document).ready(function() { 
     $('.box1').addClass('animated bounceInUp'); 
     $('.box2').addClass('animated bounceInLeft'); 
     $('.box3').addClass('animated flipInX'); 
     // 
     var wait = window.setTimeout(function() { 
      $('#boxes *').removeClass('animated'); 
     }, 3300); 

    });

然而，这只是从要素删除动画类（所有的效果是不同的），所以你不能添加新的效果类。我无法弄清楚在'.removeClass（'animated'）'中添加动画。在此先感谢。

来源

2013-02-19 drnsrc

您可以通过在函数中忽略所有类来删除所有类 - $（＃boxes *'）。removeClass（）; #boxes是一个元素的ID - 如果您需要获取所有可以使用$（'element [class^=“box”'）的元素，removeClass（）; – 2013-02-19 19:24:30

http://jsfiddle.net/rUHpf/13/ – 2013-02-19 19:25:19

更新：我重新分配的类属性删除初始类.box1，.box2毕竟类等

$(function() { 
    $('.box1').addClass('animated bounceInUp'); 
    $('.box2').addClass('animated bounceInLeft'); 
    $('.box3').addClass('animated flipInX'); 
    // 
    var wait = window.setTimeout(function() { 
     $('#boxes > div').each(function(){ 
      this.className = this.className.split(' ')[0]; 
     }) 
    }, 3300); 
});

采用了直板的JavaScript this.className比什么jQuery的方法更快。

只要#boxes元素的所有直接子元素divs确实是盒子，那么选择器$('#boxes > div')就可以了。

更新小提琴：http://jsfiddle.net/rUHpf/18/

来源

2013-02-19 19:29:35 iambriansreed

为什么要指定每个类？ – 2013-02-19 19:30:57

@JayBlanchard ** OP **说''所以应该有一种方法来同时添加/删除所有动画和效果类“。因此，他不希望摆脱非动画类和非类效果类，这些类需要每个类的特殊性去除。 – iambriansreed 2013-02-19 19:31:40

@iambriansreed有大约35种效果，我会使用100多个盒子。我只需要从所有盒子类中删除所有最近添加的效果类。 – drnsrc 2013-02-19 19:35:02

您可以通过jQuery的attr方法设置任何HTML标记属性。

如果你想从与类“动画”任何删除所有类，但离开类“动画”，你可以使用以下命令：

$(".animated").attr("class", "animated");

这将通过设置删除所有其他类“没有其他任何东西，所有匹配标签的“class”属性都变为“动画”。

来源

2013-02-19 19:45:55

:(不幸的是，所有有问题的DOM元素都没有统一的类名。 – iambriansreed 2013-02-19 19:47:49

使用jquery从多个元素中删除多个类

回答

相关问题