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>