javascript - 使用 jQuery 获取下一个兄弟的文本

Question

我正在尝试获取下一个部分项目标题 .section .project-title 并将其回显。

为了便于阅读，我的标记已被剥离，但它在结构中。我可以获取 .section.active div 下的部分项目标题，但不确定如何获取next 项目标题？

请注意，当用户向下滚动页面到每个部分时，.active 类会发生变化，因此我也需要它是动态的。

<div id="fullpage">
    <div class="section active">
        <div>
            <h1 class="project-title post-title">Section Title One</h1>
        </div>
    </div>  <!-- .section -->

    <div class="section">
        <div>
            <h1 class="project-title post-title">Section Title Two</h1>
        </div>
    </div>  <!-- .section -->

    <div class="section">
        <div>
            <h1 class="project-title post-title">Section Title Three</h1>
        </div>
    </div>  <!-- .section -->
</div>  <!-- #fullpage -->

我确实尝试过这些方法，但没有成功:

var indexNext = jQuery('.section.active').parent().siblings().find('project-title').html();

Answer 1

您可以获得当前事件部分:

var currentSection = jQuery('.section.active');

获取下部分:

var nextSection = $(currentSection).next();

找到它的项目名称:

var projectTitle = $(nextSection).find(".project-title");

然后打印出来:

console.log(projectTitle.html());

显然，您可以将所有内容放在一行中:

var nextTitle = jQuery('.section.active').next().find(".project-title").html();

请参阅以下完整示例:

var currentSection = jQuery('.section.active');
var nextSection = $(currentSection).next();
var projectTitle = $(nextSection).find(".project-title");
console.log(projectTitle.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">

  <div class="section active">
    <div>
        <h1 class="project-title post-title">Section Title One</h1>
    </div>
  </div><!-- .section -->

<div class="section">
  <div>
    <h1 class="project-title post-title">Section Title Two</h1>
  </div>
  </div><!-- .section -->

<div class="section">
  <div>
    <h1 class="project-title post-title">Section Title Three</h1>
   </div>
</div><!-- .section -->

</div><!-- #fullpage -->

希望对你有帮助，再见。