Question

为什么程序没有遍历数组！ menu.length是4仍然for循环只迭代一次！这是我在堆栈溢出中的第一篇帖子很抱歉如果真是太了不起了！

＆＃13;

var menu=["Electrical calulator","Light Calulator","Finance Calculator","temperature calculator"];


console.log(menu.length);
for(var i=0;i<menu.length;i++)
{
	console.log(i);
	var li=document.createElement("li");

	var a=document.createElement("a");
	var i=document.createElement("i");
	i.className = "icon mdi mdi-home";
	var span=document.createElement("span");
	console.log(menu[i]);
	span.innerHTML=menu[i];
	a.appendChild(i);
	a.appendChild(span);
	li.appendChild(a);
	document.getElementById('menu_bar').appendChild(li);
}

＆＃13;

<div id="menu_bar"></div>

＆＃13;

Answer 1

试试这个。您只需要更改for循环变量，因为它与其他i冲突。

var menu=["Electrical calulator","Light Calulator","Finance Calculator","temperature calculator"];


console.log(menu.length);
for(var j=0;j<menu.length;j++)
{
    console.log(j);
    var li=document.createElement("li");
    var a=document.createElement("a");
    var i=document.createElement("i");

    i.className = "icon mdi mdi-home";
  var span=document.createElement("span");
    console.log(menu[j]);
    span.innerHTML=menu[j];
    a.appendChild(i);
    a.appendChild(span);
    li.appendChild(a);
    document.getElementById('menu_bar').appendChild(li);
}

Answer 2

您正在使用var i进行迭代并创建var i元素。将迭代i更改为索引。

Answer 3

除了i的双重使用，现在是j，您需要以正确的顺序附加节点，以获得具有正确子级<ul>的{{1}}。

<li>

<ul id="menu_bar">
    <li><a href="#"><i class="icon mdi mdi-home"><span>Electrical calulator</span></i></a></li>
    <li><a href="#"><i class="icon mdi mdi-home"><span>Light Calulator</span></i></a></li>
    <li><a href="#"><i class="icon mdi mdi-home"><span>Finance Calculator</span></i></a></li>
    <li><a href="#"><i class="icon mdi mdi-home"><span>temperature calculator</span></i></a></li>
</ul>

var menu = ["Electrical calulator", "Light Calulator", "Finance Calculator", "temperature calculator"],
    j,
    li, a, i, span;

for (j = 0; j < menu.length; j++) {
    li = document.createElement("li");

    a = document.createElement("a");
    a.href= '#';
    i = document.createElement("i");
    span = document.createElement("span");

    i.className = "icon mdi mdi-home";

    span.innerHTML = menu[j];
    i.appendChild(span);
    a.appendChild(i);
    li.appendChild(a);
    document.getElementById('menu_bar').appendChild(li);
}

这个程序有什么问题没有遍历数组

3 个答案: