Foreach Schleife rückwärts

Question

Ich habe derzeit einen Schieberegler und ich möchte dynamische Klassen von der aktuellen Folie erreichen.

Beispiel:

[PAST 2, PAST 1, PAST 0] [CURRENT] [FUTURE 0, FUTURE 1, FUTURE 2] 

Dieser den Code ich es so weit haben, scheint die Zukunft gut zu funktionieren, aber ich kann meinen Kopf scheinen um die letzten Elemente zu erhalten.

var dumb = 0; 
 

 
$('ul li').each(function(i){ 
 
\t var current = 2; 
 
    if(!$(this).hasClass('slick-current')){ 
 
    \t if(i <= current){ 
 
     $(this).addClass('past-' + i); 
 
    } 
 
    else { 
 
     $(this).addClass('future-' + dumb++); 
 
    } 
 
    \t console.log(i); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<ul class="slick-initialized slick-slider"> 
 
    <div aria-live="polite" class="slick-list draggable" style="padding: 0px 60px;"> 
 
    <div class="slick-track" role="listbox"> 
 
     <li id="pig" data-number="0" class="slick-slide slick-center" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00"> 
 
     <div class="character-name">Pig</div> 
 
     </li> 
 
     <li id="trayaurus" data-number="1" class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"> 
 
     <div class="character-name">Trayaurus</div> 
 
     </li> 
 
     <li id="fin" data-number="2" class="slick-slide slick-current" data-slick-index="2" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide02"> 
 
     <div class="character-name">Fin</div> 
 
     </li> 
 
     <li id="denton" data-number="3" class="slick-slide" data-slick-index="3" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide03"> 
 
     <div class="character-name">Denton</div> 
 
     </li> 
 
     <li id="dan" data-number="4" class="slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide04"> 
 
     <div class="character-name">Dan</div> 
 
     </li> 
 
     <li id="minion" data-number="5" class="slick-slide" data-slick-index="5" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide05"> 
 
     <div class="character-name">Minion</div> 
 
     </li> 
 
    </div> 
 
    </div> 
 
</ul>

Answer 1

Man könnte so etwas wie die unten versuchen.

1) Zuerst erhalten wir die Gesamtzahl der Artikel
2) Wir bestimmen den aktuellen Artikel.
3) Wir vereinfachen die if-Anweisung durch Überprüfung i < current und i > current dies ignoriert das aktuelle Element.
4) Wir fügen die Klassen entsprechend hinzu.

var total = $('ul li').length; //gives us the total elements. 
 
var current = $('ul li.slick-current').index() //gives us the index of the current element. 
 
//keep track of the future items: 
 
var futureCounter = 0; 
 
//keep track of the past items, we know there are `current - 1` total of them: 
 
var pastCounter = current - 1; 
 
console.log("Total:",total); 
 
console.log("Current Index:", current); 
 
$('ul li').each(function(i){ 
 
    //past items: 
 
    if (i < current) 
 
    { 
 
    $(this).addClass('past-' + pastCounter--); 
 
    console.log("Class Name:",$(this).attr('class')); //show the class names 
 
    } 
 
    //future items 
 
    else if (i > current) 
 
    { 
 
    $(this).addClass('future-' + futureCounter++); 
 
    console.log("Class Name:",$(this).attr('class')); //show the class names 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<ul class="slick-initialized slick-slider"> 
 
    <div aria-live="polite" class="slick-list draggable" style="padding: 0px 60px;"> 
 
    <div class="slick-track" role="listbox"> 
 
     <li id="pig" data-number="0" class="slick-slide slick-center" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00"> 
 
     <div class="character-name">Pig</div> 
 
     </li> 
 
     <li id="trayaurus" data-number="1" class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"> 
 
     <div class="character-name">Trayaurus</div> 
 
     </li> 
 
     <li id="fin" data-number="2" class="slick-slide slick-current" data-slick-index="2" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide02"> 
 
     <div class="character-name">Fin</div> 
 
     </li> 
 
     <li id="denton" data-number="3" class="slick-slide" data-slick-index="3" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide03"> 
 
     <div class="character-name">Denton</div> 
 
     </li> 
 
     <li id="dan" data-number="4" class="slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide04"> 
 
     <div class="character-name">Dan</div> 
 
     </li> 
 
     <li id="minion" data-number="5" class="slick-slide" data-slick-index="5" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide05"> 
 
     <div class="character-name">Minion</div> 
 
     </li> 
 
    </div> 
 
    </div> 
 
</ul>