Question

我想将child div附加到每个给定的父div。应该通过调用decorateDiv（）来装饰子div。

例如，在执行appendChildren之后，执行divs 应采取以下形式（假设decorateDiv什么都不做）

function appendChildren() 
{
var allDivs = document.getElementsByTagName("div");

for (var i = 0; i < allDivs.length; i++) 
  {
   var newDiv = document.createElement("div");
   decorateDiv(newDiv);
   allDivs[i].appendChild(newDiv);
  }
}

// Mock of decorateDiv function for testing purposes
function decorateDiv(div) {}

我做错了什么？

Answer 1

您遇到.getElementsByTagName()返回实时 NodeList的事实。这意味着您添加到页面的新<div>元素会在您执行此操作后立即成为列表的一部分。

您可以做的是事先将NodeList转换为普通数组：

var allDivs = document.getElementsByTagName("div");
allDivs = [].slice.call(allDivs, 0);

现在在循环中使用“allDivs”只会将新元素追加到最初寻找它们时的元素。

Answer 2

每次循环迭代时，使用allDivs.length字段中的condition将访问length属性。因此，为函数外部的length声明一个变量，并在condition字段中指定变量名称。

function appendChildren() 
{
var allDivs = document.getElementsByTagName("div");
var len = allDivs.length;

for (var i = 0; i < len ; i++) 
  {
   var newDiv = document.createElement("div");
   decorateDiv(newDiv);
   allDivs[i].appendChild(newDiv);
  }
}

// Mock of decorateDiv function for testing purposes
function decorateDiv(div) {}

Answer 3

getElementsByTagName会返回直播NodeList ，这会为每个添加的新div增加长度。

使用非实时document.querySelectorAll() 的NodeList。

let allDivs = document.querySelectorAll("div");

或将Live NodeList转换为数组。使用ES6 [... spread]运算符非常简单。

let allDivs = [...document.getElementsByTagName("div")];

Answer 4

这就是答案，问题应该是使appendChildren函数更有效率。 for Testdome.com循环感谢Mario

function appendChildren() {

var allDivs = $('div');
var divlen = allDivs.length;

 for (var i = 0; i < divlen; i++) {
 var newDiv = document.createElement("div");
 decorateDiv(newDiv);
 allDivs[i].appendChild(newDiv);

 }

 }

 /*really the question should be make appendChildren the function efficient*/

function decorateDiv(div){}

使用for循环将子div附加到每个div

4 个答案: