Vòng lặp tiếp theo của jQuery sẽ không quay lại con đầu tiên

Question

Tôi hiện đang cố gắng lặp qua các phần tử anh chị em nhưng không thể nhận được vòng lặp để quay lại anh chị em đầu tiên.

Tôi đang sử dụng các chức năng nextOrFirst như đã thấy here

tôi đã nhân rộng những gì tôi đang cố gắng để đạt được trong này fiddle

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

Bạn có thể giữ cùng một mã chỉ cần thay thế dòng này

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

với điều này

$ (this).insertBefore ($ (nextItem));

Answer 2

Tại sao không chỉ di chuyển phần tử cuối cùng lên đầu và hơn loại bỏ cuối cùng một

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); 

Tôi đoán bạn đang cố gắng để đạt được một cái gì đó như thế này: jsfiddle

Answer 3

Đây là một cách rất đơn giản. Thay vì thiết lập các thuộc tính HTML của mục hiện hành đến mục tiếp theo, chỉ cần sử dụng insertAfter như thế này:

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 4

Tôi nghĩ rằng đây là hoạt động chính xác (nhưng có lẽ không như bạn dự kiến). Trong phiên đầu tiên của .each() chức năng

• phần tử đầu tiên được thiết lập để "số 2" (giá trị của phần tử thứ hai)
• sau đó yếu tố thứ hai được đặt thành "số 3" (giá trị của yếu tố thứ ba)
• cuối cùng là yếu tố thứ ba được đặt thành "số 2" mà hiện nay là giá trị của phần tử đầu tiên

Answer 5

Nó là tốt với phương pháp của bạn nextOrFirst(), nhưng khi bạn gọi vòng lặp each, có là sth. sai rồi.

Lần đầu tiên bạn nhận được nextItem, bạn thay đổi văn bản của thành phần đầu tiên thành number 2. Vì vậy bạn chỉ có thể nhận được number 2 khi thời gian thứ 3 bạn sẽ có được các yếu tố đầu tiên là nextItem, và html của bạn sẽ hiển thị:

number 2 
number 3 
number 2 

Đó là lý do tại sao vòng lặp của bạn không thể quay trở lại đầu tiên: đó là tốt để bạn nextOrFirst, nhưng sai với each của bạn.

Cảm ơn, Edison