如何使用 Javascript 遍历 DOM 元素更改 id

Question

我有 36 个 id 为 id="square-1"、"square-2" 等的 div，框在一个 6x6 网格容器中。 我希望它们都是正方形的，并且是网格每个正方形的大小。 我想制作一个 function 以将 css 添加到每个人，以确定他们在网格中的 position。 在我看来，我可以做一些事情来用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，那么就让它完成繁重的工作。 例如，不是用 id 对 36 个<div>进行硬编码，而是在循环的每次迭代中创建一个<div> 。 在下面的示例中，容器是<main> ，每个子框都是<section> 。 每个<section>都有一个 CSS 属性order和一个相应的数字和一个 id: "sq" + 一个相应的数字。 order属性适用于弹性项目在弹性容器中出现的顺序。

 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 inside.div-container 中的每个子元素来实现：

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

Answer 4

看来您可以在这里使用 css 网格。

要使用它，您只需将 css 添加到父项（此处为您的div-container ）并填充将排列在网格中的子元素。

如果您是 HTML 和 css 的初学者，您可以使用cssgrid-generator等网站生成网格。

---

小例子

这里使用 2*2 网格的小例子

 .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 class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

---

注意：您还可以使用 javascript 中的 for 循环生成子元素，这将使您的代码更轻

Answer 5

如果您使用CSS 网格，请使用循环创建标记（我已使用模板字符串推送到数组中）并将其添加（连接数组）作为容器的innerHTML 。 如果要在网格中精确定位框的 position，可以添加数组索引作为数据 id 属性以及行/列属性。

在这个例子中，我添加了一个 function，当它被点击时，它会改变框的背景颜色（一个,active类）。

 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 class="box" 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>

附加文件

• 事件委托

• 模板/字符串文字