jQuery下一個循環不會回到第一個孩子

Question

我目前正在嘗試循環兄弟元素，但無法讓循環回到第一個兄弟。

我使用的nextOrFirst功能看到這里

我已經復制了我想要在這個小提琴中實現的目標

HTML

<div id="stories">
  <div class="swapper"><p>number 1</p></div>
  <div class="swapper"><p>number 2</p></div>
  <div class="swapper"><p>number 3</p></div>
</div>

使用Javascript

$(document).ready(function() { 

$.fn.nextOrFirst = function(selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
};

setInterval(

    function swap() {

        $(".swapper").each(function() {

            var nextItem = $(this).nextOrFirst();

            $(this).html($(nextItem).html());

            return;

        });

    }, 5000);

});

Answer 1

為什么不將最后一個元素移到頂部而不是刪除最后一個元素

setInterval(

    function swap() {
        var $container = $("#stories");
        $container.prepend($container.find('.swapper:last').html());// move last to top
        $container.find('.swapper:last').remove(); // remove last
    }, 2000);

我猜你試圖達到這樣的目標： jsfiddle

Answer 2

我認為這是正常的（但可能不像你設想的那樣）。 在.each()函數的第一次迭代中

• 第一個元素設置為“數字2”（第二個元素的值）
• 然后第二個元素設置為“數字3”（第三個元素的值）
• 最后，第三個元素設置為“數字2”，現在是第一個元素的值

Answer 3

您可以保留相同的代碼只需替換此行

$（本）的.html（$（nextItem）的.html（））;

有了這個

$（本）.insertBefore（$（nextItem））;

Answer 4

這是一個非常簡單的方法。 而不是將當前項的HTML屬性設置為下一項，只需使用insertAfter，如下所示：

http://jsfiddle.net/jgk8B/5/

$(document).ready(function() { 

    $.fn.nextOrFirst = function(selector) {
        var next = this.next(selector);
        return (next.length) ? next : this.prevAll(selector).last();
    };

    setInterval(

        function swap() {

            $(".swapper").each(function() {

                $($(this).nextOrFirst()).insertAfter($(this));

                return;

            });

    }, 500);
});

Answer 5

你的方法nextOrFirst()很好，但是當你each調用循環時，都會有。 錯誤。

在第一次獲得nextItem ，將第一個元素的文本更改為number 2 。 因此，當第3次將第一個元素作為nextItem ，您可以獲得number 2 ，並且您的html將顯示：

number 2
number 3
number 2  

這就是為什么你的循環不能回到第一個：你的nextOrFirst ，但你的each錯了。

謝謝，愛迪生