如何迭代使用Javascript更改id的DOM元素

Question

我有36个id="square-1“、"square-2”等in的div，它们都位于网格6x6容器中。我希望它们都是正方形的，并且是网格中每个方格的大小。我想要做一个函数，以添加css到他们每一个，以确定他们在网格中的位置。在我看来，我可以用a for循环迭代它们，并应用"gridColumn =“a/b”，其中a和b相对于for循环中的i，所以我不必在css文档中指定36次。这有可能吗？说得通吗？非常初学者..。

    <div class="div-container">
        <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>

Answer 1

通过CSS属性跟踪元素是脆弱的。如果您使用的是JavaScript，那么就让它来做繁重的工作。例如，不要用ids硬编码36 <div>，而是在循环的每一次迭代中创建一个<div>。在下面的例子中，容器是一个<main>，每个子框是一个<section>。每个<section>都被赋予一个order的CSS属性，一个相应的数字和一个id："sq"+一个相应的数字。order属性适用于flex项在flex容器中的出现顺序。

​

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>

​

Answer 2

您可以抓取父元素并循环遍历子元素：

​

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

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

​

Answer 3

因此，如果您只想通过DOM元素迭代，可以通过遍历. div容器中的每个div子元素来实现：

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