javascript - 将创建 div 更改为循环，每个都有唯一的 id

Question

我有一个完整的 div 代码，它是 5x5 的盒子。但是，我不想写 25 个 div，而是想使用 2 个 for 循环来实现它。我尝试了几件事但无法解决，因为我需要为每件事都设置唯一的 ID(正如您在代码中看到的那样)。每个类的随机类名称也不同(box1、box2、box3、box4、box5)我有 5 个不同的类，因为每个类都有不同的动画顺序。在这个问题上需要帮助。我几乎检查了每个主题。

编辑，我应该有 2 个 for 循环，一个用于行，一个用于列。下面的代码是我的尝试。

for(var i=0; i<5; i++)
{
    for(var j=0; j<5; j++) 
    {   

        document.write('<div class="box2" id=1>'
                        +'<script> randomColorGenerator();'
                        + '</'+ 'script> </div>');

    }

}

    <div class="box" id="1" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box3" id="2" > 
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="3" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box2" id="4" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box5" id="5" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

    <div class="box2" id="6"> 
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box" id="7"> 
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box5" id="8" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="9">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box3" id="10">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

    <div class="box5" id="11">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="12" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box3" id="13">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box2" id="14" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box" id="15" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

    <div class="box" id="16">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box5" id="17" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box3" id="18" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box2" id="19" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="20" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

    <div class="box3" id="21">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="22" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box" id="23">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box2" id="24" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box5" id="25">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

Answer 1

让我们分解一下，首先创建一个函数来为您生成一个 div。

function createDiv(index) {
  var animationClass = Math.floor(Math.random() * 5) + 1;
  var div = document.createElement('DIV');
  div.class = 'box' + animationClass;
  div.id = index;
  return div;
}

接下来，根据需要循环多次并将 div 添加到容器元素。

var container = document.getElementById('container');

for (var i=0; i <= 25; i++){
  container.appendChild(createDiv(i));
}

请注意，要使其正常工作，您需要有一个 id 为 container 的元素。