jQuery następna pętla nie wraca do pierwszego dziecka

Question

Obecnie próbuję zapętlić elementy rodzeństwa, ale nie mogę uzyskać pętli, aby powrócić do pierwszego rodzeństwa.

używam funkcji nextOrFirst widzianą here

Mam replikowane co staram się osiągnąć w tym 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

można zachować ten sam kod po prostu zastąpić ten wiersz

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

z tego

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

Answer 2

Po prostu przenieś ostatni element do góry i niż usunąć ostatni

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

Chyba próbuje osiągnąć coś takiego: jsfiddle

Answer 3

Oto bardzo prosty sposób. Zamiast ustawiania właściwości HTML bieżącej pozycji do następnej pozycji, wystarczy użyć insertAfter tak:

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

myślę, że to jest poprawnie (ale być może nie, jak przewidziano) działa. W pierwszej iteracji .each() funkcji

• pierwszy element jest ustawiany na „numer 2” (wartość drugiego elementu)
• następnie drugi element jest ustawiony na „numer 3” (wartość trzeci element)
• wreszcie trzeci element jest ustawiony na „numer 2”, który jest teraz wartość pierwszego elementu

Answer 5

jest dobrze, aby metodę nextOrFirst(), ale podczas rozmowy pętlę each istnieje jest coś. źle.

Po raz pierwszy dostajesz nextItem, zmieniasz tekst pierwszego elementu na number 2. Więc może po prostu dostać number 2 gdy czas 3th pojawi się pierwszy element jako nextItem, a html pokaże:

number 2 
number 3 
number 2 

Dlatego pętla nie może wrócić do pierwszego: to dobrze na swojej nextOrFirst, ale nie tak z twoim each.

Dzięki, Edison