Question

该函数使用slice()方法在动态创建的div中单击时显示八个元素。如何为每个div赋予唯一的 id ？您的建议将对我有很大帮助。

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

您可以在进行迭代的同时在for循环中执行此操作：

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

{
    x += '<div id="box-' + i + '"> class="box">' + newArray[i] + '</div>';

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

}

Answer 2

您可以在文本字符串中使用分配ID。

您还可以通过以下两项操作来改进此代码：

将getElementById移动到循环之外
使用js方法代替字符串连接

类似的东西（未经测试）：

// get the container
container = document.getElementById('container');

for (i = 0; i < newArray.length; i++)
{
  // create a div
  var div = document.createElement('div');

  // add attributes
  div.setAttribute("id", "box-" + i);
  div.setAttribute("class", "box");

  // create text node
  var textnode = document.createTextNode("This is div #" + i);

  // add text to div
  div.appendChild(textnode); 

  // append to container
  container.appendChild(div); 

}

Answer 3

如何在创建时给它id？同样，将class=box放在引号中-> class="box"。

在for循环之后仅将整个div结构添加一次。因为现在您基本上是将整个内容覆盖多次。

var words = [40];

var count = 0;

var x = "";

function nextElems() {

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

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

    {
        // Change class and add custom id
        x += '<div class="box" id="box-'+i+'">' + newArray[i] + '</div>';
    }

    document.getElementById('container').innerHTML = x; // Add divs after for loop

    x = "";

    count += 8;
}

现在每个盒子都有一个唯一的ID，从box-0，box-1，...到box-n

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

3 个答案: