使用jQuery获取下一个兄弟的文本 [英] Getting text of next sibling with jQuery

问题描述

我试图获得下一个部分项目标题 .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  - > 
  

我没有尝试过这些方法：

$ b $（< pre> code> var indexNext = jQuery（'。section.active'）。parent（）。siblings（）。find（'project-title'）。html（）;

解决方案

您可以使用：

  $（'。section.active + .section .project-title'）。text（）; 
  

我用CSS选择器来选择 .project-title 直接下一个兄弟的元素。因为它是一个纯粹的CSS选择器，所以它比jQuery的 .next（）方法更有效。

如果你想检查下一节的存在。所有你需要做的就是添加一个像这样的支票：

pre $ code 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><！ - .section - >< / div><！ - #fullpage - >

I am trying to get the next Section Project Title .section .project-title and echo it out.

My markup has been stripped back for ease of reading here but it is there in structure. I am able to grab the section project title under the .section.active div but not sure on how to grab the next project title?

Please note that the .active class changes when the user scrolls down the page to each section, so I also need it to be dynamic.

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

I did try something along these lines with no luck:

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

解决方案

You can use:

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

I've used a CSS selector to select the .project-title element of immediate next sibling. As it is a pure CSS selector so it is more efficient than jQuery's .next() method.

You can check the existence of next section if you want. All you need to do is to add a check like this:

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

Working Demo:

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

这篇关于使用jQuery获取下一个兄弟的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！