Traverser l'arbre DOM pour le prochain cours; frère ou fille

Question

J'ai un scénario de mise en page où une flèche fixe vers le bas est conçue pour faire défiler un utilisateur vers la prochaine section pleine hauteur.

Chaque section a une classe (.section) Cela fonctionne et est assez simple lorsque chaque section est tous les frères et sœurs. Il y a un bloc de code qui nécessite que ces sections soient dans un autre div.

J'ai créé un codepen pour illustrer cette 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> 

Ma logique jusqu'ici a été. - Ajoutez une classe (.section-past) à chaque section après avoir passé le haut de la fenêtre. - Lorsque vous cliquez sur le lien descendant, recherchez le dernier (.section-past) puis faites défiler jusqu'à la section suivante.

Cela tombe en panne quand il faut aller dans le conteneur div pour la section suivante; ou lorsque vous sortez du conteneur pour la section suivante.

J'ai expérimenté avec la fonction .index() pour jquery, mais j'ai fini avec des solutions très compliquées qui ont échoué. Également examiné des instructions conditionnelles imbriquées, mais encore une fois fini avec un code de défaillance très gonflé. En espérant que quelqu'un puisse me diriger vers la bonne logique et la bonne solution.

Merci Chris

Answer 1

Vous pouvez essayer de trouver l'élément suivant par l'indice, comme

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