実装例:
https://jsfiddle.net/gocho/q1aw67kw/
(function() {
var $wrapper = $('.wrapper')
var classNameList = [
'n1', 'n2', 'n3', 'n4', 'n5',
'n6', 'n7', 'n8', 'n9'
];
setInterval(function() {
// classNameの変更によってquerySelectorの結果が変わらないように、querySelectorの結果を保持
var nodes = classNameList.map(function(className) {
return {
className: className,
$node: $wrapper.find('.' + className)
};
});
nodes.forEach(function(current, currentIndex, whole) {
var nextIndex = (currentIndex === whole.length - 1) ? 0 : currentIndex + 1;
current.$node.removeClass(current.className);
current.$node.addClass(whole[nextIndex].className);
});
}, 1000);
})();
.something {
width: 30px;
height: 30px;
float: left;
}
.n1 {
background-color: #EDF
}
.n2 {
background-color: #FED
}
.n3 {
background-color: #DFE
}
.n4 {
background-color: #EFD
}
.n5 {
background-color: #DEF
}
.n6 {
background-color: #FDE
}
.n7 {
background-color: #DEF
}
.n8 {
background-color: #FDE
}
.n9 {
background-color: #EFD
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<div class="something n1"></div>
<div class="something n2"></div>
<div class="something n3"></div>
<div class="something n4"></div>
<div class="something n5"></div>
<div class="something n6"></div>
<div class="something n7"></div>
<div class="something n8"></div>
<div class="something n9"></div>
</div>