17

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/

Improve this question

4 Answers 4

Reset to default
28

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Explosion Pills, would you mind taking a look at my answer? I'm wondering what you think. What you have above was my first thought, before you posted it, so I moved to trying a different method.
@JaredFarrish it's a cool solution, but I'd just be a bit worried about the dependency on the selector actually building the collection in order (e.g. what would stop it from making .section:eq(0) last at any time? You also end up with way more method calls
That's the same issue I have, I'm not sure of the mechanism for .last(). I wouldn't say it's freewheeling with methods; it has one more than yours, and that's if you don't count the reselect in the else...
I suspect @BoltClock is correct in judging that the results come back in the DOM order, which in this case would be beneficial to the ordering (the :eq(0) would always come first in the results). If there were some way to prove that, I think it would work pretty well.
2

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.

Improve this answer

7 Comments

This is one of the most confusing aspects of :eq(), :first and :last for me. I have no idea how these selectors work when used in contexts such as selector groups (like the one you have here), and when preceding a combinator (e.g. .foo:eq(0) .bar). I'm guessing what happens here is that :eq(0) takes the first out of the entire expression .selected + .section, .section, even if you place .section:eq(0) first. It seems bizarre, but that's the only reasonable explanation I can come up with for it.
I see what you're suggesting. That since the :eq(0) is in there, it sees that as the first result, regardless of the rest of the selector statement. I guess it makes some kind've sense (?), but it's odd that it wouldn't return the result of the selectors in the order given (and I'm about to try to test this with document.querySelectorAll() to see if it matches). I had never considered that what the selection had stated could come back in a different order than given, more or less the one ordered by the indices of elements (is that right?).
document.querySelectorAll() will never match for the simple reason that :eq() is not a valid CSS selector (it's simply a JS API to a browser's native CSS selector engine). That said, document.querySelector('.selected + .section, .section') (without the All) will work like :eq(0)/:first: jsfiddle.net/BoltClock/9UFD2/2 I gather that elements are always returned in the order as they appear in the DOM.
Well then, never mind (I was thinking it was an actual selector, but I get it confused with nth-child()). I should probably take a look at the jQuery definition. That one part is the one part I'm not quite sure how it would play in reality.
api.jquery.com/eq-selector simply says it takes the 0-based index of an element within a set of matches. In that case, one may as well use $('.selected + .section, .section').eq(0).last() instead, since it's extremely confusing in selector syntax. (Side note: I hate jQuery's messed-up selector syntax.)
|
0

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');}
});
Improve this answer

Comments

0

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.

Improve this answer

2 Comments

This is a blatant rip-off/lazy re-write of accepted answer. Does not in anyway contribute anything new to question.
@Hybridwebdev That certainly was not my intention. To be fair, I upvoted the correct answer as well. Not trying to steal votes, just trying to help. I think there is still value in this answer so I will leave it. But by all means flag it for an administrator to review if you feel like it's doing more harm than good.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.