Question

I have three lists.
When I click next I want to get the next li, which is fine but when I reach the end of the first list I would like the next to be the first of the second list.. I’ll try and explain a little better.

<ul class='list'>
   <li image_id="1"></li>
   <li image_id="2"></li>
</ul>

<ul class='list'>
   <li image_id="3"></li>
   <li image_id="4"></li>
</ul>

<ul class='list'>
   <li image_id="5"></li>
   <li image_id="6"></li>
</ul>

So I have three lists.. next I want to know how many li’s I have so I wrote..

var how_many $('ul.list li').length;

this is good, it’s bringing back all 6 li’s..

next I want to find a li if it has the image id im currently on.

var which = $('ul.list li[image_id^="' +  image_id +'"]');

all works fine at this point.

so now Im going to find what the next li’s image id is..

var found_next = which.nextAll('ul.list li').attr('image_id');

this also works..

I then load the new image in using a .load that has a callback that updates the current image_id…

The “PROBLEM” is when click, next..next..next etc and I get to the end of say the first list jquery brings back “undefined” not the first li of the second list. has anyone got any suggestions?

Any help would be much appreciated.

Answer 1

.nextAll only works for siblings. If you want to jump to the next <li>, you have to select all elements, and use .index and .eq() to select the next <li>.

var $li = $('ul.list li');
// Example, inside an event listener:
    var index = $(this).index($li);
    var nextElement = $li.eq( index + 1 );