Dynamic access to javascript array

Question

Hi, I have an array of dom (li) elements 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 I am adding a class to the list. So when I click, if li is not activated, then another class li will be added 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 do I need to achieve, I need to add a new class to the elements (lis) before the active one, and I need to add another class to lis after the active li. Or add the ui-state-disabled class to li after the active li. How can i do this? Any ideas guys?

Press the 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 want to add a class to li that appears after 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; } ... 

In the comments, you said that the logic of the “previous” button does not work 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; } } } ...