jquery - 让列表向上滑动并将第一项添加到列表末尾

Question

我想基本上将所有的 li 向上滑动，并将顶部的 li 附加到底部，这将是即将发生的事件的轮换。

这就是我到目前为止所拥有的。它将第一个向上滑动并将其附加到 ul 的末尾，但随后它只是每 1000 毫秒将相同的 li 附加到 ul 中。

为什么它不继续向上滑动第一个？我假设我必须以某种方式使用实时功能？？

$(document).ready(function() {

    function scroll() {
        $('#events ol li:first').slideUp();

        $('#events ol li:last').appendTo($('#events ol'));
    }


    setInterval(scroll, 1000);
});

Answer 1

你需要稍微改变一下它，以便在向上滑动后追加自身，如下所示:

$(function() {
  function scroll() {
    $('#events ol li:first').slideUp(function() {
      $(this).show().parent().append(this);
    });
  }
  setInterval(scroll, 1000);
});

You can see it in a demo here 。我们正在做的是在.slideUp()之后完成后，回调运行，它获取该元素，显示它(因为它隐藏在 .slideUp() 的末尾)并执行 .append()将其自身传递给其父级...将其移至末尾。