JQuery - Zyklus eine Klasse mit Timer

Question

I unten gezeigten Struktur eine Liste Witz haben

<div id="slider"> 
    <ul> 
    <li class='active'> a </li> 
    <li> b </li> 
    <li> c </li>  
    <li> d </li> 
    <li> e </li> 
    </ul> 
</div> 

Ich brauche die Klasse ‚aktiv‘ von Li in einem Fahrrad Weise ändern Hier wird das Skript arbeite ich mit . Problem ist es entweder fügt die Klasse aktiv alle li oder entfernt die Klasse aktiv aus alles li

 toggleSlide = function(){ 
      $("#slider ul li").each(function(index) { 
      if($(this).hasClass('active')){ 

       $("#slider ul li").removeClass('active'); 
       $(this).next().addClass('active')); 
       //lis = $("#slider ul li") 
       //$(lis[(index+1)%lis.length]).addClass('active'); 
      } 
      }); 
     } 
    setInterval(toggleSlide, 5000);​ 

Answer 1

Sie können dies erheblich vereinfachen mit .add() und .last() da Elemente aus .add() in Dokumentreihenfolge gedreht werden, es würde wie folgt aussehen:

var toggleSlide = function(){ 
    $("#slider li.active").removeClass() 
    .next().add("#slider li:first").last().addClass("active"); 
} 
setInterval(toggleSlide, 5000); 

You can test it here (1000ms duration for the demo)

Wie dies funktioniert, ist es der nächste <li> nimmt Wenn da ist eins, dann fügt auch das erste hinzu, indem .last() (da sie in der Reihenfolge der Dokumente sind) erhalten wir die eine Wenn es ist da, sonst enthält das Set nur ein Element, das :first<li>, und wir sind zurück an den Anfang.

Answer 2

Dies sollte ein wenig besser funktionieren:

toggleSlide = function() {  
    var $active = $('#slider ul li.active'); 
    if($active.length == 0) { 
     $active = $('#slider ul li:first'); 
    } 
    $active.removeClass('active'); 
    if($active.next('li').length > 0) { 
     $active.next('li').addClass('active'); 
    } else { 
     $('#slider ul li:first').addClass('active'); 
    } 
} 
setInterval(toggleSlide, 5000);​ 

Sie brauchen nicht die .each() Schleife und das war, was Ihre Probleme verursacht hat. Sie müssen nur am aktuell aktiven Element arbeiten.

anschauliches Beispiel:

http://jsfiddle.net/MS5DV/

Answer 3

ich für etwas viel einfacher

toggleSlide = function() { 
    var active = $("#slider ul li.active"); 
    var next = active.next(); 
    if (next.length === 0) { 
     next = $('#slider ul li:first'); 
    } 

    active.removeClass('active'); 
    next.addClass('active'); 
} 
setInterval(toggleSlide, 1000); 

http://jsfiddle.net/HyRYC/1/

Im Grunde gehen würde, das aktive Element finden und speichern Sie es auf eine lokale Var. Finde dann den Gegenstand danach und speichere das auch. Wenn jetzt der letzte aktiv ist, gibt next() ein jQuery-Objekt ohne Übereinstimmungen zurück, was bedeutet, dass es eine Länge von Null hat. In diesem Fall finden Sie den ersten Artikel als unseren next.

Nein, wir entfernen einfach die Klasse active vom aktuellen aktiven Element und fügen sie unserem nächsten hinzu.