Question

是这样的：

<button> One <button> 
<button> Two <button> 
<button> Three <button>

我想做的是这样的：

<div><button> One <button></div> 
<div><button> Two <button></div>   
<div><button> Three <button></div>

Javascript：

var theDivs = document.createElement("div");

var divWrapper = new Array(3).fill(theDivs);

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

  divWrapper[0].appendChild(buttonOne);
  divWrapper[1].appendChild(buttonTwo);
  divWrapper[2].appendChild(buttonThree);

  document.body.appendChild(divWrapper[0]);
  document.body.appendChild(divWrapper[1]);
  document.body.appendChild(divWrapper[2]);

};

Answer 1

您需要创建单独的<div>元素，在每个循环迭代中创建一个，否则所有数组元素都将是相同的<div>。

这就是你在做什么：

var divWrapper = new Array(3).fill(theDivs);

这意味着divWrapper数组的所有三个元素都是对同一个<div>对象的引用，而您并不需要。

此外，您可以通过在循环内仅创建和附加一次元素来创建DRY-er代码，而不是像在此处所做的那样将其复制三遍：

divWrapper[0].appendChild(buttonOne);
divWrapper[1].appendChild(buttonTwo);
divWrapper[2].appendChild(buttonThree);

document.body.appendChild(divWrapper[0]);
document.body.appendChild(divWrapper[1]);
document.body.appendChild(divWrapper[2]);

演示：

for (var i = 0; i < 3; i++) {
  var divWrapper = document.createElement("div");
  var button = document.createElement("button");
  button.textContent = i + 1;

  divWrapper.appendChild(button);
  document.body.appendChild(divWrapper);
};

div {   /* make <div>s clearer */
  background-color: grey;
  margin: 1em;
}

根据您的评论，以下是一个演示，向您展示如果按自己的方式操作，将用一个元素填充数组的情况。尽管您在循环中使用divWrappers[i]访问数组的不同元素，但它们都引用同一对象，因此所有按钮都添加到同一<div>中。

var divWrapper = document.createElement("div");
var divWrappers = Array(3).fill(divWrapper);

for (var i = 0; i < divWrappers.length; i++) {
  var button = document.createElement("button");
  button.textContent = i + 1;

  divWrappers[i].appendChild(button);
  document.body.appendChild(divWrappers[i]);
};

div {
  background-color: grey;
  margin: 1em;
}

Answer 2

尝试使用jQuery的.wrapAll()

在您的HTML中包含jQuery（如果需要有关如何执行此操作的更多信息，请访问上面的网站）。

然后使用：

$VAR1 = bless( [
                 bless( [
                          bless( do{\(my $o = 'foo')}, 'str' ),
                          ' '
                        ], 'str' ),
                 bless( do{\(my $o = 'bar')}, 'str' )
               ], 'str' );

如何将每个div包装到多个元素

2 个答案: