Foreach循環倒退

Question

我目前有一個滑塊，我想從當前幻燈片中實現動態類。

例子：

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

這一點，我的代碼至今，前途似乎很好地工作，但我似乎無法讓我的頭繞不過去的元素。

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

你可以嘗試像下面。

1）首先我們得到項目總數
2）我們確定當前項目。
3）我們通過檢查i < current和i > current來簡化if語句，忽略當前項目。
4）我們相應地添加類。

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>