Foreach loop backwards

Question

I currently have a slider and i want to achieve dynamic classes from the current slide.

Example:

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

This it the code i have so far, the future seems to work fine but i cant seem to get my head around the past elements.

var dumb = 0;

$('ul li').each(function(i){
 var current = 2;
  if(!$(this).hasClass('slick-current')){
   if(i <= current){
      $(this).addClass('past-' + i);
    }
    else {
      $(this).addClass('future-' + dumb++);
    }
   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>

score 4 · Accepted Answer · answered Nov 04 '16 at 06:07

You could try something like the below.

1) First we get the total number of items
2) We determine the current item.
3) We simplify the if statement by checking i < current and i > current this ignores the current item.
4) We add the classes accordingly.

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>

Thanks for that, but whenever this is run on a change, the classes still say there and the new ones are added on. Would it be possible to remove the older version? — jagmitg, Nov 04 '16 at 09:44
In the same loop you can just remove any classes first, have a look at this: http://stackoverflow.com/questions/16039708/jquery-wildcard-class-selector-in-removeclass — JanR, Nov 04 '16 at 09:49

Foreach loop backwards

1 Answers1