我怎么循环.next()？

Question

我有3个具有相同类的div,我在点击时将"选择"类添加到NEXT DIV并从之前的类中删除它,它工作正常但我想循环它

目前它从1 - > 2 - > 3,我希望它循环,3 - > 1,请帮助...

HTML

<div id="all">
<div class="section selected">ONE</div>
<div class="section">TWO</div>
<div class="section">THREE</div>
</div>
<br />
<a href="javascript:;" id="button">CLICK</a>

CSS

.selected{background:red}

JS

$('#button').click(function(){
    $('.section.selected').removeClass('selected').next('.section').addClass('selected'); 
});

JS Fiddle Link:http://jsfiddle.net/madhuri2987/KK66g/2/

Answer 1

最简单的方法就是检查是否.next()存在,如果不是"选择"第一个.

var $next = $('.section.selected').removeClass('selected').next('.section');
if ($next.length) {
    $next.addClass('selected'); 
}
else {
    $(".section:first").addClass('selected');
}

http://jsfiddle.net/KK66g/3/