使用 jquery 每 4 秒将 class 添加到 div 中的最佳方法是什么？

Question

what's the best way to add a class to the div with a class of post every 4 seconds using jquery?

<div class="34 post">
<img width="311" height="417" src="#" class="#" alt="newspapers" />
<h2><a href="#">Headline News Part 2</a></h2>
<p>testing new content</p>
</div>

<div class="9 post">
<img width="311" height="417" src="#" class="#" alt="newspapers" />
<h2><a href="#">Headline News Part 2</a></h2>
<p>testing new content</p>
</div>

<div class="6 post">
<img width="311" height="417" src="#" class="#" alt="newspapers" />
<h2><a href="#">Headline News Part 2</a></h2>
<p>testing new content</p>
</div>

so i want the first to have a class of "display" then after 4 seconds, i want to remove the class on that one and add it to the second one. and then after 4 more seconds, remove it from the second and add it to the third. when it gets to the end it loops back around.

Answer 1

var $postDivs = $('div.post'), // assuming these won't change
    i = -1,
    CLASS_NAME = 'foo';

setInterval(function () {
    $postDivs.eq(i).removeClass(CLASS_NAME);
    i = (i+1) % $postDivs.length;
    $postDivs.eq(i).addClass(CLASS_NAME);
}, 4000);

http://jsfiddle.net/mattball/k2sJy/

Answer 2

If you want to create a simple infinite rotation of news items, you may try jQuery cycle plugin for doing this.