使用 jQuery 获取下一个兄弟姐妹的文本

Question

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

为了便于阅读，我的标记已被剥离，但它在结构上存在。我可以在 .section.activediv 下抓取部分项目标题，但不确定如何获取下一个项目标题？

请注意，当用户向下滚动页面到每个部分时，.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 -->

我希望它对你有帮助，再见。

Answer 2

您可以使用：

$('.section.active + .section .project-title').text();

我使用 CSS 选择器来选择紧邻下一个兄弟姐妹的.project-title元素。由于它是一个纯CSS选择器，所以它比jQuery的.next()方法更有效。

如果需要，您可以检查下一部分是否存在。您需要做的就是添加如下所示的支票：

if($('.section.active + .section').length) {
    $('.section.active + .section .project-title').text();
}

工作演示：

alert($('.section.active + .section .project-title').text());

<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 -->

Answer 3

你可以使用下一个方法

$('.section.active').next().find('h1').text();

工作演示 ： https://jsfiddle.net/gaq23jbL/4/