如何从二维数组创建多个无序列表

Question

我想在div下面创建多个无序列表，以显示我之前创建的多维数组。

我有这个当前:

let divElementGroups = document.createElement("div"),
numberOfulListItems = groups.length,
ulListItemGroups = document.createElement("ul"),
listItemGroups = document.createElement("li"),
elementTitleGroups = document.createElement("span");
document.getElementById("teamsList").appendChild(divElementGroups);
for (var i = 0; i < numberOfulListItems; i++) {
divElementGroups.appendChild(ulListItemGroups);
ulListItemGroups.appendChild(elementTitleGroups);
elementTitleGroups.textContent = "Groep" + i;
for (var j = 0; j < groups[i].length; j++) {
listItemGroups.innerHTML = ArrayClass[i][j];
ulListItemGroups.appendChild(listItemGroups);
}
}

据我所知，第一个for循环应该创建所有的无序列表，第二个循环应该把所有的列表放在这些无序列表中。所以理论上，它应该创建一个无序列表然后用" group 1 "在顶部，后跟数组中该部分的所有项。

下面是一个示例数组:

var groups = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

当使用this运行代码时，它给出的输出:

<div>
<ul>
<span>Groep1</span>
<li>undefined</li>
</ul>
</div>

而它应该给出这样的输出:

<div>
<ul>
<span>Group 1</span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<span>Group 2</span>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<span>Group 3</span>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>

Answer 1

你的代码的问题是，它只创建了一个ul元素，并且只有一个li元素——在循环之前。

然后循环将这两个元素作为appendChild的参数传递，这意味着单个ul元素只获得移动，而不是复制。对于单个li元素也是如此。

因此，您应该在的每次迭代的外部循环中创建一个新的ul元素，并在每次迭代的内部循环中创建一个新的li元素。

一个小问题是i以0开头，因此它将输出"Groep 0"。如果你想让它以1开头，你需要输出"(i + 1)"

我想ArrayClass应该是groups(反之亦然)

纠正代码:

var groups = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
let divElementGroups = document.createElement("div"),
numberOfulListItems = groups.length;
document.getElementById("teamsList").appendChild(divElementGroups);
for (var i = 0; i < numberOfulListItems; i++) {
let ulListItemGroups = document.createElement("ul"),
elementTitleGroups = document.createElement("span");
divElementGroups.appendChild(ulListItemGroups);
ulListItemGroups.appendChild(elementTitleGroups);
elementTitleGroups.textContent = "Groep " + (i + 1);
for (var j = 0; j < groups[i].length; j++) {
let listItemGroups = document.createElement("li");
listItemGroups.innerHTML = groups[i][j]; //ArrayClass[i][j];
ulListItemGroups.appendChild(listItemGroups);
}
}

<div id="teamsList"></div>

Answer 2

这是脚本的另一个版本:

const groups = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]];
document.body.insertAdjacentHTML("afterbegin",
groups.map((gr,i)=>`<ul><span>Group ${i+1}</span>${gr.map(l=>`<li>${l}</li>`).join("")}</ul>`).join(""));