如何为动态创建的每个子 div 提供唯一 ID？

Question

该函数使用该slice()方法在动态创建的 div 中单击时显示八个元素。我怎样才能给每个人一个唯一的iddiv？你的建议对我很有帮助。

var words = [40];

var count = 0;

var x = "";

function nextElems() {

    var newArray = words.slice(count, count + 8);

    for (i = 0; i < newArray.length; i++) {

        x += '<div class=box>' + newArray[i] + '</div>';

        document.getElementById('container').innerHTML = x;

    }

    x = "";

    count += 8;

}

我试过这个，但它不起作用：

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

var first = mainDiv.getElementsByTagName('div')[0];

first.id = 'one';

Answer 1

您可以在文本字符串中使用分配 ID。以下是您可以做的其他一些事情来改进此代码：将 getElementById 移到循环外使用 js 方法而不是字符串连接像这样的东西（未经测试）：// get the containercontainer = document.getElementById('container');for (i = 0; i < newArray.length; i++){&nbsp; // create a div&nbsp; var div = document.createElement('div');&nbsp; // add attributes&nbsp; div.setAttribute("id", "box-" + i);&nbsp; div.setAttribute("class", "box");&nbsp; // create text node&nbsp; var textnode = document.createTextNode("This is div #" + i);&nbsp; // add text to div&nbsp; div.appendChild(textnode);&nbsp;&nbsp; // append to container&nbsp; container.appendChild(div);&nbsp;}

Answer 2

您可以在 for 循环中在迭代时直接执行此操作：for (i = 0; i < newArray.length; i++){&nbsp; &nbsp; x += '<div id="box-' + i + '"> class="box">' + newArray[i] + '</div>';&nbsp; &nbsp; document.getElementById('container').innerHTML = x;}

Answer 3

创建时给它id怎么样？也把class=box像这样的引号 -> class="box"。并且在 for 循环之后只添加一次整个 div 构造。因为现在你基本上是多次覆盖整个事情。var words = [40];var count = 0;var x = "";function nextElems() {&nbsp; &nbsp; var newArray = words.slice(count, count + 8);&nbsp; &nbsp; for (i = 0; i < newArray.length; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; // Change class and add custom id&nbsp; &nbsp; &nbsp; &nbsp; x += '<div class="box" id="box-'+i+'">' + newArray[i] + '</div>';&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById('container').innerHTML = x; // Add divs after for loop&nbsp; &nbsp; x = "";&nbsp; &nbsp; count += 8;}现在每个盒子都有一个唯一的 id，从 box-0, box-1, ... 到 box-n