jQuery Rotating Classes from an Array

Question

I am trying to think through the logic of this particular feature and am having a difficult time doing so.

The Feature

I have five divs with IDs and I want to be able to increment their classes one thru five.

div#fuel .one

div#fire .two

div#blah .three

div#test .four

div#rain .five

I have my array of the five classes and would like to rotate through those five divs, bumping up their class (or down from five to one). This change would ideally be slightly staggered (approx. 100ms) between divs.

What would be the best way to handle this? Looping through my array? Store the IDs in a second array and stagger with a second counter where to start when swapping out classes? Any advice would be greatly appreciated.

** EDIT: The Code**

var theClasses = ["one","two","three","four","five"];
setInterval(function() {
    for (var i=0; i<theClasses.length; i++) {
        $(".frame-one .hotspot").index(i).removeClass().addClass("hotspot "+ theClasses[i]);
    }
    theClasses.add(theClasses.shift());
}, 5000);

This is throwing an "Uncaught TypeError: undefined is not a function" error.

EDIT: Working Code

var theClasses = ["one","two","three","four","five"];
setInterval(function() {
        theClasses.push(theClasses.shift());
        $(".frame-one .hotspot").each(function(i) {
            var thisClass = theClasses[i];
            $(this).removeClass().addClass("hotspot "+ thisClass);
        });
}, 5000);

Answer 1

One way is to keep an array with the class names at hand. Whenever you want to rotate, do a circular shift of length one on the array to rearrange the classes. Then, use each (taking advantage of the index argument that it provides) to assign a class to each element based on its index.

See it in action.