Cannot get the previous item in a for each loop

Question

I have the following code inside a scroll event:

stickySliderItems.forEach( function( item, i ) { 
  if(i) { // exclude first
    let meScrollStart = scroll - sliderWrapperT - ( i * sliderItemH );
    let meScroll = _clamp( meScrollStart, min, max);
    let meShift = (i === sliderItemNum) ? maxS : meScroll.map(min, max, minS, maxS); // except last one
    item.style.transform = "translate(" + meShift + "px," + meScroll + "px)";

    if ( meScroll >= max - fadeMargin && !item.classList.contains("finished") ) { 
      item.classList.add("finished");
      stickySliderItems[i-1].classList.remove("finished");
    }; // can’t get this to work backwards
  };
});

What I like to do is apparently simple (and it is for me in jQuery indeed), but so hard to achieve in pure JS. When my code attaches the class “finished” to an element it should at the same time remove it from the previous sibling.

I tried so much. previousSibling etc. nothing works. Where is the error in my concept?

Update: I don’t know if this can help. This is the jQuery code which did the job well:

$stickySliderItem.each( function( i ) { 
  if(i) { // exclude first
    var $this = $(this);
    let meScrollStart = scroll - sliderWrapperT - ( i * sliderItemH );
    let meScroll = clamp( meScrollStart, min, max);
    let meShift = (i === sliderItemNum) ? maxS : meScroll.map(min, max, minS, maxS); // except last one
    let cssTransform = "translate(" + meShift + "px," + meScroll + "px);";
    $this.attr("style", "transform:" + cssTransform + " -webkit-transform:" + cssTransform)
         .toggleClass("finished", meScroll >= max - fadeMargin); 
  };
});

Answer 1

jQuery has become less and less useful as javascript has advanced. Template literals make stitching together strings a lot easier. The style attribute can be assigned directly. jQuery's .toggleClass() is easily replaced with Javascript's .classList.toggle().

stickySliderItem.forEach((item, i) => {
  if(!i) return;
  const meScrollStart = scroll - sliderWrapperT - ( i * sliderItemH );
  const meScroll = clamp( meScrollStart, min, max );
  const meShift = (i === sliderItemNum) ? maxS : meScroll.map(min, max, minS, maxS);
  const cssTransform = `translate(${meShift}px, ${meScroll}px)`;
  item.style = `transform:${cssTransform}; -webkit-transform:${cssTransform};`;
  item.classList.toggle('finished', meScroll >= max - fadeMargin);
});

In your case, this makes for an almost direct translation of your jQuery to Javascript.