如何循环jQuery .next函数none -top

Question

我试图自动循环并滚动每个元素从一组元素到页面顶部与jQuery.next函数。然而，该函数只滚动第一个元素，停止且不循环。

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

是第一个元素，然后停止。你知道我哪里做错了吗?

我的代码如下所示:

Answer 1

你总是得到:first之后的下一个元素，这意味着它总是第二个元素，而不是循环。

为当前元素添加一个类，然后获取它之后的下一个元素。

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

Answer 2

下面的代码将使它工作。您从开始:第一个

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