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;
            }       
        }

    }

may check the index and after that index add the value in.. Is there any function in javascript to append values after checking a specific index in an array? — blackdaemon
– blackdaemon, Commented Mar 23, 2017 at 2:50

K Scandrett · Accepted Answer · 2017-03-23 04:05:31Z

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;
    }
  }
}
...

edited Mar 23, 2017 at 4:05

answered Mar 23, 2017 at 3:12

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

blackdaemon Over a year ago

but under the else condition, the items before activeIndex also will be added right?

K Scandrett Over a year ago

Yes, see the alternative I just posted, to only add a class to the li following it

K Scandrett Over a year ago

sorry, just fixed a bug in the code. The classList.add needs to come before addClass = true, or it will apply it to the active li as well

K Scandrett Over a year ago

You may also like to put in a classList.remove('ui-state-disabled'); before the add, so that when you click on another li to make it active it will first remove any ui-state-disabled that occur before it in the array

blackdaemon Over a year ago

Sacrelett, can u add that in my code and update in the answer. I dun really get it sorry

|

Collectives™ on Stack Overflow

Dynamic accessing of javascript array

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related