只获取数组及其子元素的一个元素

Question

我有一个多维数组categories ，我正在使用menuToElement函数遍历这个数组。

它接受array的所有元素及其子元素，并在ul返回它。 代码完全正常工作，但我不知道如何只循环遍历数组的一个元素及其所有子元素。

例如，我想要做的是仅循环引擎元素及其所有子元素和所有子元素数组。 我的问题是：这甚至可能与我正在使用的for...of循环有关，因为我尝试循环遍历类别索引，但它说它不可迭代。

 function menuToElement(menu) { const ul = document.createElement("ul"); for (const item of menu) { const li = document.createElement("li"); if (Object(item) === item) { li.textContent = item.text + ' \▽'; li.appendChild(menuToElement(item.children)); } else { li.textContent = item; } ul.appendChild(li); } return ul; } var categories = [{ text: "engine", children: [1, 2, 3, { text: "piston", children: [4, 5, 6, { text: "piston", children: [4, 5, 6] }] }] }, { text: "tire", children: [7, 8, 9] }]; const ul = menuToElement(categories); document.getElementById("menu").appendChild(ul);

 li>ul { display: none; } li:hover>ul { display: block; }

 <div id="menu"></div>

Answer 1

我有一个多维数组categories ，我正在使用menuToElement函数遍历这个数组。

它接受array的所有元素及其子元素，并在ul返回它。 代码完全正常工作，但我不知道如何只循环遍历数组的一个元素及其所有子元素。

例如，我想要做的是仅循环引擎元素及其所有子元素和所有子元素数组。 我的问题是：这甚至可能与我正在使用的for...of循环有关，因为我尝试循环遍历类别索引，但它说它不可迭代。

 function menuToElement(menu) { const ul = document.createElement("ul"); for (const item of menu) { const li = document.createElement("li"); if (Object(item) === item) { li.textContent = item.text + ' \▽'; li.appendChild(menuToElement(item.children)); } else { li.textContent = item; } ul.appendChild(li); } return ul; } var categories = [{ text: "engine", children: [1, 2, 3, { text: "piston", children: [4, 5, 6, { text: "piston", children: [4, 5, 6] }] }] }, { text: "tire", children: [7, 8, 9] }]; const ul = menuToElement(categories); document.getElementById("menu").appendChild(ul);

 li>ul { display: none; } li:hover>ul { display: block; }

 <div id="menu"></div>

Answer 2

我有一个多维数组categories ，我正在使用menuToElement函数遍历这个数组。

它接受array的所有元素及其子元素，并在ul返回它。 代码完全正常工作，但我不知道如何只循环遍历数组的一个元素及其所有子元素。

例如，我想要做的是仅循环引擎元素及其所有子元素和所有子元素数组。 我的问题是：这甚至可能与我正在使用的for...of循环有关，因为我尝试循环遍历类别索引，但它说它不可迭代。

 function menuToElement(menu) { const ul = document.createElement("ul"); for (const item of menu) { const li = document.createElement("li"); if (Object(item) === item) { li.textContent = item.text + ' \▽'; li.appendChild(menuToElement(item.children)); } else { li.textContent = item; } ul.appendChild(li); } return ul; } var categories = [{ text: "engine", children: [1, 2, 3, { text: "piston", children: [4, 5, 6, { text: "piston", children: [4, 5, 6] }] }] }, { text: "tire", children: [7, 8, 9] }]; const ul = menuToElement(categories); document.getElementById("menu").appendChild(ul);

 li>ul { display: none; } li:hover>ul { display: block; }

 <div id="menu"></div>