how do i Loop .next()?

Question

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

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

Answer 1

I'm not sure if I should claim this works in every case, but I've always wondered if it were possible to progress to the first on last not being valid. This is what I worked out:

$('#button').click(function(){
    $('.selected + .section, .section:eq(0)')
        .last().addClass('selected')
        .siblings('.selected').removeClass('selected');
});

http://jsfiddle.net/userdude/9UFD2/

What this does is first select the .section which is after .selected:

.selected + .section

I also add a secondary selector to make sure and get at least one match:

, .section:eq(0)

The above represents the first $('.section')[0], in this relatively simple example. Then I use .last() on the result of the compound selection, giving me either result [1] (for what would be a valid .next() match), or [0] for a first match (see, .last() will give both first and last if there's only one result in the list).

Although the selectors are ordered seemingly opposite to using .last(), this seems to work instead of .first(), for which I do not necessarily understand the reason why that is so. This is whichever order the selectors are in, so I ordered them the way they made sense in the selection.

Then, the rest is simple. Add a class to whichever the selector returned .last(), then find the .siblings() to that (newly) selected .section with .selected (the only other one would be the one we're selecting away from) and remove it's .selected class.

It seems to work. I suppose I'd like to hear any comments as to whether this is reliable or not.

Answer 2

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/

Answer 3

CoffeeScript

My simple CoffeeScript solution I thought I would share for those using it:

$currently_selected = $('.section.selected')

# Loop back to first sibling if on the last one. 
if $currently_selected.next().length is 0 
  $next_selected = $currently_selected.siblings().first()

else 
  $next_selected = $currently_selected.next()

$currently_selected.removeClass('selected')
$next_selected.addClass('selected')

NOTE: Make sure to pass the appropriate selector to next() and siblings() if there are siblings that you don't want to include in your loop/cycle.

Answer 4

I did a simple code like this

var i=0;
$('#button').click(function(){
    i++;
    if(i == $('.section').length) {$('.section.selected').removeClass('selected');$($('.section')[0]).addClass('selected');i=0;}
    else{$('.section.selected').removeClass('selected').next('.section').addClass('selected');}
});