jQuery 下一个兄弟 li 无法处理最后一项

Question

目前，这在很大程度上是有效的:

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

您可以在此处查看演示:http://www.studioimbrue.com/index2.php

整个过程都运行良好。当您单击底部的过滤器时，它仍然有效并跳过隐藏的 div。一旦你到达末尾，就在 #about div 之前，它就不会继续下去，而且我不知道为什么它不会。

编辑:我将 div 元素更改为 li 元素。仍然无法正常工作；它到达列表的最后一个并且不会再进一步​​。这根本没有任何意义。

Answer 1

您需要使用 .nextAll() 中的选择器进行轻微调整调用，如下所示:

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

因为你的 HTML 是这样的:

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

您想找到下一个<li>这是 .nextproject 的 sibling 的父级(不是 <li> 的下一个元素的子级)...它恰好适用于除最后一个部分之外的所有部分，因为它们有 <ul>与 <li>里面的元素(右侧的图像)。最后一个“关于”部分没有任何 <li> children ，以前右边那些小图像中的第一个是它滚动到的内容，而不是实际的部分......所以它最后不起作用:)

现在想想，你是不是很困惑 .find() 和 .filter() ？ .filter()也可以...但是自从 .nextAll()需要一个选择器，在这种情况下不需要。