我如何循环.next()? [英] how do i Loop .next()?

问题描述

我有3个div具有相同的类，我在单击时将"selected"类添加到NEXT DIV并将其从上一类中删除，它的工作正常，但我想循环它

I have 3 divs with same class, i am adding class 'selected' to NEXT DIV on click and removing it from previous class, its working fine but I want to loop it

目前它是从1-> 2-> 3开始的，我希望它循环播放，3-> 1，请帮忙...

Currently its going from 1 --> 2 --> 3, I want it to loop, 3-->1, please help...

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链接: http://jsfiddle.net/madhuri2987/KK66g/2/

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

推荐答案

最简单的方法就是检查.next()是否存在，如果不存在，请首先选择"<选择".

The simplest way would just be to check whether .next() exists and if not "select" the first.

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

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

这篇关于我如何循环.next()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！