Dynamic accessing of javascript array

Question

Hi I have an array of dom elements (li) as shown below:

Array[4]
0:li.ui-steps-item.ui-state-default
1:li.ui-steps-item.ui-state-highlight
2:li.ui-steps-item.ui-state-default.ui-state-disabled
3:li.ui-steps-item.ui-state-default.ui-state-disabled

I have a click event, and am appending a class to the list. Means when I click if the li is not the activated li, then other li's class will be appended with this extra class.

private _btnClick(_btn: any, config:any):void {
    var nodesArray=Array.prototype.slice.call(this._vcr.element.nativeElement.querySelectorAll('li.ui-steps-item'));
    for (let x in nodesArray) {
        if (nodesArray[x] != nodesArray[this._activeIndex]) {
            nodesArray[x].classList.add('ui-state-disabled');
            console.log(nodesArray[x]);
        }
    }
}

Now what I need to achieve is, I need to add a new class to the items(lis) before the active li and i need to add another class to the lis after the active li. Or Only add the class ui-state-disabled to the li after the active li. How can I do that? Any idea guys?

Click button code:

private _btnClick(_btn: any, config:any):void {
        this.buttonEvent.emit({btn:_btn, formBtns:this._formBtn}); // Event emitter

        let arrLen: any = config.length-1;

        if (_btn.BtnType=="next"){
            if (this._activeIndex < config.length -1) {
                this._activeIndex++;
            }
            if (this._activeIndex == arrLen){
                _btn.label = "Confirm";
                // _btn.disabled = true;
                // _btn.class = 'btn-success';
            }
            for (let x in this._formBtn){
                if (this._formBtn[x].BtnType  == "previous"){
                    this._formBtn[x].disabled = false;
                    this._formBtn[x].hidden = false;
                    break;
                }

            }
        }
        else if (_btn.BtnType=="previous"){
            this._activeIndex--;
            for (let x in this._formBtn){
                if (this._formBtn[x].BtnType  == "previous"){
                    if(this._activeIndex == 0) {
                        this._formBtn[x].hidden = true;
                        continue;
                    }
                }
                if(this._formBtn[x].BtnType == "next") {
                    if(this._formBtn[x].label == "Confirm") {
                          this._formBtn[x].label = "Next";
                          this._formBtn[x].disabled = false;
                          this._formBtn[x].class = 'btn-text';
                          continue;
                    }
                }
            }
        }
        this._emitStepVal(this._finalConfig);
        // console.log(this._vcr.element.nativeElement.querySelectorAll('li.ui-steps-item'));
        var nodesArray = Array.prototype.slice.call(this._vcr.element.nativeElement.querySelectorAll('li.ui-steps-item'));

        var addClass = false;
        for (var i = 0; i < nodesArray.length; i++) {
            if (addClass) nodesArray[i].classList.add('ui-state-disabled');
            if (i === this._activeIndex) {
                addClass = true;
            }       
        }

    }

Answer 1

If you only want to append a class to the li occurring after the active li you can do:

var addClass = false;

for (var i = 0; i < nodesArray.length; i++) {

  if (addClass ) 
     nodesArray[i].classList.add('ui-state-disabled');
  else
     nodesArray[i].classList.remove('ui-state-disabled');

  if (i === this._activeIndex) addClass = true; 
}
...

Within the comments you said that the "previous" button logic was not working correctly. My suggestion is to do something like:

...
else if (_btn.BtnType == "previous") {
  if (this._activeIndex > 0) {
    this._activeIndex--;
  }
  if (this._activeIndex == 0) {
    _btn.disabled = true;
    //_btn.hidden = true; // if you want to hide the previous button when at the first item
  }
  for (let x in this._formBtn) {
    if (this._formBtn[x].BtnType == "next") {
      this._formBtn[x].disabled = false;
      this._formBtn[x].hidden = false;
      break;
    }
  }
}
...