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

【问题标题】：Changing creating div's to loop, each having unique id将创建 div 更改为循环，每个都有唯一的 id
【发布时间】：2016-06-16 21:48:27
【问题描述】：

我有一个完整的 5x5 盒子 div 代码。但是，我不想编写 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>

【问题讨论】：

请向我们展示您的最大努力，并解释该努力以何种方式失败，它没有做什么？它做了什么不该做的事？请查看“minimal reproducible example”和“How to Ask”指南，了解我们希望您在问题中包含哪些内容，并向您解释如何提出好的问题，提高您获得更好、更完整答案的几率，从中您可以学到更多有用的知识。
您需要一个预处理器或模板引擎，它可以从for 循环中输出 25 个 div，例如 PHP、Jade 或 Angular (ng-repeat)。并调用 25 次相同的函数。函数调用不需要紧跟在每个 div 之后。

标签： javascript html css

【解决方案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 的元素。

【讨论】：

看起来很完美，但我应该有 2 个 for 循环，因为第一个用于 5x5 框的列的第一行我应该有 2 个 for 循环计数到 5
对不起，你为什么要 2 个 for 循环？
因为 1 个用于 5x5 框的列的第一行，我应该有 2 个循环计数到 5
您没有设置任何内容来描述行或列，因此实际上不需要两个循环。你能发布代码出了什么问题吗？
它只是不显示任何东西。我对 javascript 和 css 很陌生，所以我没有什么问题。我还为 div 添加了 innerhtml 以添加函数 randomColorGenerator();

【解决方案2】：

试试下面的

for(var i = 1; i <= 25; i++) {
    var id = i % 5;
    var cssClass = 'box' + id;
    var divID = 'div'+i;
    console.log(i + ' id='+id+', divId=' + divID + ', cssClass=' + cssClass);
    if(id == 0) {
       console.log('INSERT CLEAR DIV HERE');
    }
}

【讨论】：