Estoy tratando de recorrer y desplazar automáticamente cada elemento de un grupo de elementos a la parte superior de la página con la función jQuery .next . Sin embargo, la función desplaza solo el primer elemento, se detiene y no se repite.
$(function() { setInterval(function() { var $next = $('.per-account:first').next('.per-account'); var $first = $('.per-account:first'); if ($next.length) { $('html, body').animate({ scrollTop: $next.offset().top }, 1000); } else { $('html, body').animate({ scrollTop: $first.offset().top }, 1000); } }, 3000) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="per-account" style="height: 500px; width: 100%; background: red;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: blue;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: orange;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: green;"> </div>el primer elemento y se detiene. Cualquier idea de lo que estoy haciendo mal aquí.
Mi código se ve a continuación:
Siempre obtienes el siguiente elemento después de :first , lo que significa que siempre es el segundo elemento, no el bucle.
Agregue una clase al elemento actual y luego obtenga el siguiente elemento después de eso.
$(function() { setInterval(function() { var $current = $('.per-account.current') var $next = $current.next('.per-account'); if (!$next.length) { // wrap around to the beginning $next = $('.per-account:first'); } $current.removeClass('current'); $next.addClass('current'); $('html, body').animate({ scrollTop: $next.offset().top }, 1000); }, 3000) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="per-account current" style="height: 500px; width: 100%; background: red;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: blue;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: orange;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: green;"> </div>El siguiente código hará que funcione. Empezabas desde el primero en cada intervalo.
$(function() { function runScroll(){ let $current = $('.per-account:first'); const id = setInterval(runInterval, 1000); function runInterval(){ if ( $current.next('.per-account').length ){ $current = $current.next('.per-account'); $('html, body').animate({ scrollTop: $current.offset().top }, 500); } else { clearInterval(id); } } } runScroll(); // Re-run to scroll again }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="per-account" style="height: 500px; width: 100%; background: red;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: blue;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: orange;"> </div> <div class="per-account" style="height: 500px; width: 100%; background: green;"> </div>