Foreach循环向后

Question

我目前有一个滑块,我想从当前幻灯片实现动态类.

例:

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

这是我到目前为止的代码,未来似乎工作正常,但我似乎无法理解过去的元素.

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>

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>