jQuery next sibling li not working on last item

Question

This is currently working, for the most part:

$(".nextproject").click(function() {
    $(window).scrollTo(
        $(this)
        .parents()
        .nextAll()
        .find("li:visible:first"),
        1000,
        {easing:'easeOutExpo', axis:'x', offset:-75 }
    );
});

You can see the demo here: http://www.studioimbrue.com/index2.php

It works fine through the whole thing. When you click the filters at the bottom, it still functions and skips the hidden divs. Once you get to the end, right before the #about div, it doesn't continue going, and I have no clue why it won't.

Edit: I changed the div elements to li elements. Still isn't working properly; it gets to the last one of the list and won't go any further. This doesn't make any sense at all.

Answer 1

You need a slight adjustment, using the selector in the .nextAll() call, like this:

$(".nextproject").click(function() {
    $(window).scrollTo(
        $(this)
        .parents()
        .nextAll("li:visible:first"),
        1000,
        {easing:'easeOutExpo', axis:'x', offset:-75 }
    );
});

Since your HTML is like this:

<li class="container photography_cat" style="">
  <!-- Other stuff.... -->
  <div class="nextproject"></div>
</li>

You want to find the next <li> that's a sibling of the .nextproject's parent (not a child of the next element that's a <li>)...it just happened to work on all but the last section because they have that <ul> with <li> elements inside (the images on the right). The last "about" section doesn't have any <li> children, and previously the first of those little images on the right was what it was scrolling to, not the actual section...so it didn't work at the end :)

Now that I think about it, is it possible you were confusing .find() and .filter()? .filter() would work as well...but since .nextAll() takes a selector, there's no need in this case.