Native JS add class using a counter reset on each parent class

Question

I have this structure:

I need to increment on each child div by one and reset the counter when it passes to the new parent class. I can do this easily with Jquery using each but I am struggling to make it work with native JavaScript, since the project I am working on does not use Jquery. The structure should look like this:

I have been using var ParentDiv= document.querySelectorAll(".parent"); and ChildDiv = document.querySelectorAll(".child");

I've got a counter going on with a for loop but not been able to get it to restart the counter on each parent. Any help to point me out how I can accomplish this?

user_3874623 · Answer

You can loop over the parents, and for each parent reset the counter back to one before looping over the children. Something like this:

let ParentDiv= document.querySelectorAll(".parent");
for (let parent of ParentDiv) {
  let count = 1
  for (let child of parent.querySelectorAll(".child")){
    child.className += '-' + count++
  }
}

// print parents to check results:
for (let parent of document.querySelectorAll(".parent")){
  console.log(parent.innerHTML)
}

user_7486313 · Answer

You can iterate over the parents and change the class name of each child according to the index of the inner loop as follows:

let parents = document.getElementsByClassName("parent");
for(let i = 0; i < parents.length; i++){
     let p = parents[i];
     for(let j = 0; j < (p.children).length; j++){
          p.children[j].className += `-${j+1}`;
     }
     console.log(p.children);
}

user_6386632 · Answer

querySelectorAll with forEach and classList's add and remove methods can work:

document.querySelectorAll('.parent').forEach(p => 
  p.querySelectorAll('div').forEach((div,i)=>{
    div.classList.remove('child');
    div.classList.add('child'+(i+1));
  })
)
console.log(document.body.innerHTML);

Native JS add class using a counter reset on each parent class

3 Answers