Javascript jquery循环随机div，然后添加类并在延迟后删除

我正在尝试随机循环一系列div。每次选择一个div时，它都会添加一类

.active key

，然后再次删除它，并在一定时间后移动到另一个div。在jQuery中有这样做的方法吗

<div id="keyboard">
   <div class="key">
   <div class="key active key">
   <div class="key">
   <div class="key">
   <div class="key">
   <div class="key">
</div>

var divs = $('#keyboard .key ').addClass('active-key'), 
i = 0; 

(function cycle() { 

divs.eq(i).show(0) 
.delay(1000) 
.removeClass('active-key'); 

i = ++i % divs.length; 

})();

var divs=$（'#keyboard.key'）.addClass（'active-key'），
i=0；
（函数循环（）{
分区均衡器（一）显示（0）
.延迟（1000）
.removeClass（“主动键”）；
i=+i%divs.length；
})();

---

如果使用SVG，则必须使用attr而不是class

---

对于最终的SVG示例

对于随机项选择，您可以尝试以下方法：

var divs=$（'#keyboard.key'）；
（功能循环（）{
setTimeout（函数（）{
var index=Math.floor（Math.random（）*divs.length）；
divs.removeClass（'active-key'）
.eq（index）.addClass（'active-key'）；
循环（）；
}, 1000);
})();
.key{
宽度：40px；
高度：40px；
背景：#EEE；
显示：内联块；
}
.key.active-key{
背景：珊瑚；
}
根据您的代码，我制作了以下内容：

CSS

HTML:

<div id="keyboard">
   <div class="key"></div>
   <div class="key active"></div>
   <div class="key"></div>
   <div class="key"></div>
   <div class="key"></div>
   <div class="key"></div>
</div>

希望有帮助
 这是我的答案

$(document).ready(function(){
 function f1()
 {
    var childSize=$("#keyboard").children().size();
    setTimeout(function(){
        $("#keyboard div").removeClass("active-key");
        var rand1=Math.floor(Math.random()*(childSize));

      $("#keyboard").find("div:nth-child("+(rand1+1)+")").addClass("active-key");

      f1();
    },1000);
  }
});

您还可以使用.hasClass（）方法添加一个额外的条件来检查div是否已经拥有该类
 是随机的还是一个接一个的（查看
++i%divs.length；
）？随机的，不是一个接一个的，是的，很抱歉上面的代码是基于我试图调整的东西。感谢这在你的示例中非常有效，但实际上它不是在div上，而是在路径上（我认为使用divs会更容易理解）我做了一个JS提琴，它不会在div中循环。不用担心，我发现你必须使用attr而不是class。谢谢你的帮助！是的，jQuery无法向SVG元素添加/删除类。Attr将起作用：
divs.Attr（'class'，'key'）.eq（index）.Attr（'class'，'key-active-key'）
var loop = window.setInterval(function() {
    var rand = Math.round(Math.random()*5) + 1; // 5 is the length of divs
    var i = 0;
    $('.key').removeClass('active');
    $('.key').each(function() {
        if(rand == i) {
            $(this).addClass('active');
        }
        i++;
    });

    // Stop the loop with `enter code here`
    //  clearInterval(loop);

}, 500);

$(document).ready(function(){
 function f1()
 {
    var childSize=$("#keyboard").children().size();
    setTimeout(function(){
        $("#keyboard div").removeClass("active-key");
        var rand1=Math.floor(Math.random()*(childSize));

      $("#keyboard").find("div:nth-child("+(rand1+1)+")").addClass("active-key");

      f1();
    },1000);
  }
});