Foreach 루프 뒤로

Question

현재 슬라이더가 있으며 현재 슬라이드에서 동적 클래스를 만들고 싶습니다.

예 : 이것은 내가 지금까지 가지고있는 코드를 IT

[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) if 문을 i < current 및 i > current으로 단순화하여 현재 항목을 무시합니다.
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>