如何將每個div包裝到多個元素

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（如果需要有關如何執行此操作的更多信息，請參見上面的網站）。

然后使用：

$(":button").wrapAll("<div class=''/>");