Question

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

为了方便阅读，我的标记已被删除，但它的结构存在。我能够获取.section.active div下的部分项目标题，但不确定如何获取 下一个 项目标题？

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

请参阅以下完整示例：

＆＃13;

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

＆＃13;

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

＆＃13;

我希望它可以帮助你，再见。

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();
}

工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用next方法

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

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

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

3 个答案: