Cycling through divs in bootstrap indefinitely? - html

Question

I need to loop through 4 divs arranged in a 2x2 way (cycle=highlighting the selected div) indefinitely. I can't think of the j-query required to do this.
<div class="contentwrap-black" id="current-features">
<div id="content" class="container">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<!-- ----------- IPHONE --------- -->
<div class="span4" id="iphone-white">
<img class="iphone-white-img" src="img/iphone-wht-front.png" alt="">
</div>
<!-- ----------- BANNER --------- -->
<div class="span8">
<h1 class="current-features-banner">CURRENT FEATURES</h1>
<div class="row-fluid">
<!-- ----------- LEFT COLUMN --------- -->
<div class="span6" id="">
<div class="row-fluid">
<div class="span12 content" id="">
<h3>Heading-1</h3>
<p> Paragraph-1</p>
</div>
<div class="span12" id="divider">
<hr>
</div>
<div class="span12 content" id="">
<h3>Heading-2</h3>
<p> Content-2</p>
<hr id="line"> <!-- THIS LINE IS HIDDEN UNTIL MOBILE SIZE-->
</div>
</div>
</div>
<!-- ----------- RIGHT COLUMN --------- -->
<div class="span6" id="">
<div class="row-fluid set">
<div class="span12 content" id="">
<h3>heading-3</h3>
<p>paragraph-3
</div>
<div class="span12 trap" id="divider">
<hr>
</div>
<div class="span12 content " id="">
<h3>heading-4</h3>
<p>paragraph-4.</p>
</div>
</div>
</div>
<!-- ----------- END OF COLUMNS --------- -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The 4 divs I want to loop between are the ones containing the class "content", highlighting each div for 2 seconds and then switching to the next one.

Answer 1

I got a fiddle for you: http://jsfiddle.net/tkjzZ/4/
EDIT: I fixed needing the flag classes. You still need to start with one highlighted though.
function changeHighlight()
{
if($(".content.highlight").is(":last"))
{
$(".highlight").removeClass("highlight");
$(".content").first().addClass("highlight");
}
else
{
$(".highlight").removeClass("highlight").next().addClass("highlight");
}
}
$(document).ready(function () {
setInterval(changeHighlight, 2000); //2 sec
});

Answer 2

This does not cover your animation or whatever you want to do, but it shows how to keep it cycling indefinitely
function cycle() {
$(".container .content")
.last()
.detach()
.prependTo(".container");
}
// and in the inverse sense
function cycle() {
$(".container .content")
.first()
.detach()
.appendTo(".container");
}
Example http://jsfiddle.net/XuHQv/
Ok so color cycling it is http://jsfiddle.net/XuHQv/1/
setInterval(function() {
var items = $(".container .content");
var length = items.length;
items.each(function(i, ele) {
if ($(ele).hasClass("color")) {
$(ele).removeClass("color");
if (i < (length-1)) {
$(items[i+1]).addClass("color");
}
else {
$(items[0]).addClass("color");
}
return false;
}
});
}, 1000);