jQuery sonraki döngü ilk çocuğa geri dönülmez

Question

Şu anda kardeş öğelerle uğraşmaya çalışıyorum ama ilk kardeşi geri dönmek için döngü alamıyorum.

ben görüldüğü gibi nextOrFirst fonksiyonunu kullanıyorum here Ben bu 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> 

yılında

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

}); 

Javascript ulaşmak çalıştığım şey çoğaltılmış ettik

Answer 1

Sadece bu çizgiyi yerine aynı kodu tutabilir

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

bu

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

Answer 2

Neden son öğeyi en üste getirmiyorsunuz ve daha kaldırmak sonuncusu

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

Ben böyle bir şey ulaşmaya çalışıyorum tahmin: jsfiddle

Answer 3

İşte çok basit bir yolu. Bunun yerine bir sonraki öğeye geçerli öğenin HTML özelliklerini belirleme, sadece bu gibi InsertAfter kullanın:

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

ben (eğer öngörüldüğü gibi ama belki) bu doğru çalıştığından düşünüyorum. birinci eleman "sayısının 2" olarak ayarlanır .each() fonksiyonu

• birinci yineleme (ikinci elemanın değeri) daha sonra ikinci elemanın için "sayı" 3 (değerine ayarlanır
• üçüncü unsur)
• nihayet üçüncü unsur şimdi ilk elemanın değeri "2 numaralı"

Answer 5

Bu sizin yönteme nextOrFirst() için gayet ayarlı, ancak sen döngü orada each, çağırdığınızda Sth. yanlış.

nextItem'u ilk kez aldığınızda, ilk öğenin metnini number 2 olarak değiştirin. Yani 3th zaman nextItem olarak ilk elemanı olsun sadece number 2 alabilirsiniz ve html gösterecektir:

sizin döngü ilk geri gidemez yüzden

number 2 
number 3 
number 2 

: bu nextOrFirst soruna yol açmaz, ama each ile yanlış.

sayesinde Edison