How to add active class on specific “li” on multiple “ul” elements

Question

I have three menu items and wish to add an active class the the specific li in the group (ul) when it is clicked.

I have managed to do it for one but I am battling to get it to work for each.

Fiddle: https://jsfiddle.net/qx89dt0s/

JavaScript

var selector, elems, makeActive;

selector = '.nav li';

elems = document.querySelectorAll(selector);

makeActive = function () {
    for (var i = 0; i < elems.length; i++)
        elems[i].classList.remove('active');

    this.classList.add('active');
};

for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);

Thanks in advance.

Answer 1

You need to iterate over each .nav and do the same as previously done for the li within each .nav .

 // get all .nav  and convert into array, for latest
// browser use Array.from method
[].slice.call(document.querySelectorAll('.nav'))
// iterate over .nav elements
.forEach(function(ele) {
  // get all li within it
  var elems = ele.querySelectorAll('li');

  // define the function for updating
  var makeActive = function() {
    for (var i = 0; i < elems.length; i++)
      elems[i].classList.remove('active');
    this.classList.add('active');
  };

  // bind listener
  for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);
});

 [].slice.call(document.querySelectorAll('.nav')).forEach(function(ele) { var elems = ele.querySelectorAll('li'); var makeActive = function() { for (var i = 0; i < elems.length; i++) elems[i].classList.remove('active'); this.classList.add('active'); }; for (var i = 0; i < elems.length; i++) elems[i].addEventListener('mousedown', makeActive); }); 

 li.active { color: red; } 

 <ul class="nav"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <ul class="nav"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <ul class="nav"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>