遍历下一个类的 DOM 树；兄弟姐妹或孩子

Question

我有一个布局方案，其中固定的向下箭头旨在平滑滚动用户到下一个全高部分。

每个部分都有一个类 (.section) 当每个部分都是兄弟时，这很有效并且相当简单。 有一段代码要求这些部分位于另一个 div 中。

我创建了一个代码笔来说明这个http://codepen.io/chrisando/pen/GqoORa/

<a class="down">DOWN</a>

<div class="section">
  Section 1
</div>

<div class="section">
  Section 2
</div>

<div class="container">

  <div class="section">
    Section 3
  </div>

  <div class="section">
    Section 4
  </div>

</div>

<div class="section">
  Section 5
</div>

到目前为止，我的逻辑是。 - 为每个部分添加一个类（.section-past），一旦它们通过视口的顶部。 - 单击向下链接时，找到最后一个（.section-past）然后滚动到下一个.section。

当需要进入下一部分的容器 div 时，这会崩溃；或者在下一节离开容器时。

我已经尝试过用于 jquery 的 .index() 函数，但最终得到了非常复杂的失败解决方案。还查看了嵌套条件语句，但再次以非常臃肿的失败代码告终。

希望有人能指出正确的逻辑和解决方案。

谢谢 克里斯

Answer 1

你可以尝试通过索引找到下一个元素，比如

function sectionPosition() {
  jQuery('.section').each(function() {
    var section = $(this);
    var position = section.position().top - jQuery(window).scrollTop();

    if (position <= 50) {
      section.addClass('section-past');
    } else {
      section.removeClass('section-past');
    }
  });
}

// Run on load
sectionPosition();

// run on scroll
jQuery(window).bind('scroll', function() {
  sectionPosition();
});

var $sections = $('.section');
jQuery(".down").click(function() {
  var next;
  next = $sections.eq($sections.index($('.section-past').last()) + 1);

  if (next.length) {
    jQuery('html,body').animate({
      scrollTop: next.offset().top - 50
    }, 1000);
  }
});

.section {
  background: lightblue;
  margin: 10px;
  height: 100px;
}
.container .section {
  background: lightpink;
}
.down {
  background: red;
  width: 60px;
  height: 50px;
  line-height: 50px;
  display: block;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -30px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<a class="down">DOWN</a>

<div class="section">
  Section 1
</div>

<div class="section">
  Section 2
</div>

<div class="container">

  <div class="section">
    Section 3
  </div>

  <div class="section">
    Section 4
  </div>

</div>

<div class="section">
  Section 5
</div>


<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />