通过具有数字排序的id名称的div进行循环？

Question

我有4个id，名称类型为type1，type2，type3和type4。我需要一些jquery的帮助，它为第一个div提供绿色背景，然后在2秒后，下一个div获得绿色背景，第一个返回到正常的背景颜色，依此类推。我需要循环继续下去。

<div id="type1">
<p>Hey</p>
</div>

<div id="type2">
<p>Hello></p>
</div>

<div id="type3">
<p>Hey again</p>
</div>

<div id="type4">
<p>Hello again</p>
</div>

Answer 1

为了完整起见，我想指出这可以在没有Javascript的情况下完成

使用css animations。

<强> FIDDLE

标记

<div class="animated"></div>
<div>
<p>Hey</p>
</div>

<div>
<p>Hello></p>
</div>

<div>
<p>Hey again</p>
</div>

<div>
<p>Hello again</p>
</div>

（相关）CSS

.animated
{
    position:absolute;
    top:0;
    background:green;
    z-index:-1;
    animation: move 8s steps(4) infinite;    
}

@keyframes move {
  from { top: 0; }
  to   { top: 400px; }
}

Answer 2

如果你在DIV上放一个类名，说“类型”并且少于10个DIVS，这将有效。这也适用于其他情况，但您需要对排序例程进行一些修改。

orderDivs = $(".type").sort(asc_sort);
//$("#debug").text("Output:");
// accending sort
function asc_sort(a, b){
    return ($(b).attr('id')) < ($(a).attr('id')) ? 1 : -1;    
}
var divSize = orderDivs.length;
var currentDiv = divSize -1;
var lastDiv = orderDivs[divSize-1];
console.log(orderDivs[0]);
function highLightNext() {
    $(lastDiv).css('background-color','transparent');
    currentDiv = (currentDiv+1) % divSize;
    lastDiv = orderDivs[currentDiv]; 
    $(lastDiv).css('background-color','green');
    setTimeout(highLightNext,1000);
}

highLightNext();

Link to jsFiddle

Answer 3

你可以使用JQuery做到这一点，有很多方法可以做到这一点。

小提琴：http://jsfiddle.net/KnjED/1/

修改 这不会无限循环（没有正确阅读说明） 致力于修复：）

HTML：

<div class="type">
<p>Hey</p>
</div>

<div class="type">
<p>Hello></p>
</div>

<div class="type">
<p>Hey again</p>
</div>

<div class="type">
<p>Hello again</p>
</div>

CSS：

.green {
    background: green;
}

JQuery的：

$(".type").each(function (i) {
    $(this).delay(2000*i).queue(function() { 
       $(this).addClass('green');
         $(this).prev().removeClass('green');
    })
});