jQuery nächste Schleife nicht zurück zum ersten Kind

Question

Ich versuche derzeit, Geschwisterelemente durchlaufen, aber nicht die Schleife, um zurück zum ersten Geschwister zu bekommen.

Ich verwende die nextOrFirst Funktion als here gesehen

ich repliziert habe, was ich versuche

<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 in diesem fiddle

HTML

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

}); 

zu erreichen

Answer 1

Sie denselben Code halten können nur diese Zeile ersetzen

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

mit diesem

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

Answer 2

Warum nicht einfach das letzte Element nach oben bewegen und als entfernen letzte

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

Ich denke, man so etwas zu erreichen versuchen: jsfiddle

Answer 3

Hier ist eine sehr einfache Art und Weise. Anstatt die HTML-Eigenschaften des aktuellen Elements zum nächsten Punkt einstellen, verwenden Sie einfach insert wie folgt aus:

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

Ich denke, das richtig funktioniert (aber vielleicht nicht, wie Sie ins Auge gefasst). In der ersten Iteration der .each() Funktion

• das erste Element wird auf „Nummer 2“ (der Wert des zweiten Elements)
• dann das zweite Element ist auf „Nummer 3“ (den Wert von das dritte Element)
• schließlich ist das dritte Element auf „Nummer 2“, das nun der Wert des ersten Elements

Answer 5

Es ist Ihre Methode nextOrFirst() in Ordnung, aber wenn Sie rufen die Schleife each gibt ist etw. falsch.

Beim ersten Mal erhalten Sie die nextItem, ändern Sie den Text des ersten Elements in . So können Sie nur number 2 erhalten, wenn das 3. Mal, wenn Sie das erste Element als nextItem erhalten, und Ihre HTML zeigen:

number 2 
number 3 
number 2 

Das ist, warum Ihre Schleife nicht zurück in die erste gehen kann: es zu Ihrem nextOrFirst in Ordnung, aber falsch mit deiner each.

Danke, Edison