How to iterate through DOM elements changing id with Javascript-CodePudding

I have 36 divs with ids id="square-1", "square-2", etc., framed in a grid 6x6 container. I want them to be all square and be the size of each square of the grid. I want to make a function to add css to each of them to determine their position in the grid. In my mind I can do something to iterate through them with a for loop and apply "gridColumn = "a/b"", where a and b are relative to the i in the for loop, so that I don't have to specify that 36 times in the css document. Is this even possible? Does it make sense? Very beginner...

    <div >
        <div id= "square-1"></div>
        <div id= "square-2"></div>
        <div id= "square-3"></div>
        <div id= "square-4"></div>
        <div id= "square-5"></div>
        <div id= "square-6"></div>
        <div id= "square-7"></div>
         etc...
    </div>

CodePudding user response：

Keeping track of elements by a CSS property is fragile. If you are using JavaScript, then let it do the heavy lifting. For instance, instead of hard coding 36 <div> with ids, make a <div> on each iteration of a loop. In the example below, the container is a <main> and each sub-box is a <section>. Each <section> is given a CSS property of order and a corresponding number and an id: "sq" a corresponding number. The order property applies to the order in which a flex item appears within a flex container.

const box = document.querySelector('main');

for (let i = 0; i < 36; i  ) {
  const sec = document.createElement('section');
  sec.style.order = i;
  sec.id = `sq${i}`;
  box.append(sec);
}

html {
  font: 300 5vmin/1 Consolas
}

main {
  display: flex;
  flex-flow: row wrap;
  width: 12rem;
  height: 12rem;
  border: 1px solid red
}

section {
  width: 2rem;
  height: 2rem;
  outline: 1px dashed blue
}

<main></main>

CodePudding user response：

You could grab the parent element and loop through the child elements:

var element = document.getElementById('parentDiv');
var children = element.children;

for(var i=0; i<children.length; i  ){
  var child = children[i];
  //apply changes
}

CodePudding user response：

So if you just want to iterate thru DOM elements you can do it by iterating thru every child that's div inside .div-container:

const squares = document.querySelectorAll('.div-container div')
for(let square of squares){
   square.classList.add('YOUR_CLASS')
}

CodePudding user response：

It seems like you can use a css grid here.

To use this, you simply need to add css to the parent item (here your div-container) and populate with child elements which will be arranged in grid.

If you're beginner in HTML and css, you can generate grid using websites like cssgrid-generator.

Small example

Small example here using a 2*2 grid

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  width: 210px
}

.child {
  background: red;
  width: 100px;
  height: 100px;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Note : You can also generate the child elements using a for loop in javascript which will make your code lighter

CodePudding user response：

If you use CSS Grid use a loop to create the markup (I've used template strings pushed into an array) and add that (joined array) as the innerHTML of a container. You can add the array index as the data id attribute, along with a row/column attribute if you want to pinpoint the box's position in the grid.

In this example I've added a function that changes the box background color (an ,active class) when it's clicked on.

function makeGrid(n) {
  
  const boxes = [];
  let row = 0;
  let column = 1;
  
  for (let i = 1; i < n * n; i  ) {
    
    column  ;
    
    if (i % 6 === 1) {
      row  ;
      column = 1;
    }
    
    const div = `
      <div
        
        data-id="${i}"
        data-row="${row}"
        data-column="${column}"
      >${i}
    </div>`;

    boxes.push(div);
  
  }
  
  return boxes.join('');

}

const main = document.querySelector('main');
main.innerHTML = makeGrid(6);

main.addEventListener('click', handleClick);

function handleClick(e) {
  if (e.target.matches('.box')) {
    e.target.classList.add('active');
  }
}

main { display: grid; grid-template-columns: repeat(6, 30px); gap: 0.5em; }
.box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 30px; height: 30px; border: 1px solid #676767; }
.box:not(.active):hover { background-color: lightblue; cursor: pointer; }
.active { background-color: salmon };

<main></main>

Additional documentation