jquery skip list item

Question

Is there a way for a jQuery function to "skip" an li? Such as Having 3 list items, you click on the 1st one, it calls a next() function, and skips the 2nd li and goes to the 3rd.

Current code is here:

$('ul.gallery li').click(function() { $(window).scrollTo($(this).next('li'), 800, {easing:'easeOutCirc', axis:'x', offset:-50 } ); });

I want it to skip the immediate li and go to the one after that.

Answer 1

The easiest approach would be to just call .next() again, like this:

$('ul.gallery li').click(function() {
    $(window).scrollTo($(this).next('li').next('li'), 
                       800, 
                       {easing:'easeOutCirc', axis:'x', offset:-50 });
});

If the <li> you wanted had a specific class, like this:

<ul>
  <li>Stuff</li>
  <li>Stuff 2</li>
  <li class="selectMe">Stuff 3</li>
</ul>

You could use .nextAll() instead of .next(), like this:

$('ul.gallery li').click(function() {
    $(window).scrollTo($(this).nextAll('li.selectMe:first'), 
                       800, 
                       {easing:'easeOutCirc', axis:'x', offset:-50 });
});

Answer 2

add a class to the LI that you want to skip and use :not

and example from jQuery Documentation

$("input:not(:checked) + span").css("background-color", "yellow");