jquery - 使用数字排序的 id 名称循环遍历 div？

Question

我有 4 个 id 名称为 type1、type2、type3 和 type4 的 div。我需要某种 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

Just for completeness, I'd like to point out that this can be done without Javascript

using css animations.

FIDDLE

Markup

<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>

(Relevant) 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

您可以使用 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;
}

查询：

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

Answer 3

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

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();

链接到 jsFiddle