如何解决Javascript 中的嵌套菜单项 dom 操作
我正在为我正在制作的网站创建一个嵌套的下拉菜单,并且正在努力研究如何从中更改我的代码...
<ul id="category_list">
<li>Computer equipment
<li>Computer parts
<a href="/Pages/categoryPage.html?categoryId=3">Mother board</a>
<a href="/Pages/categoryPage.html?categoryId=4">Power supply</a>
<a href="/Pages/categoryPage.html?categoryId=5">Graphic card</a>
<a href="/Pages/categoryPage.html?categoryId=24">Processor</a>
<a href="/Pages/categoryPage.html?categoryId=6">Memory</a>
<a href="/Pages/categoryPage.html?categoryId=7">Computer case</a>
</li>
这...
<ul id="category_list">
<li>Computer equipment
<ul>Computer parts
<li><a href="/Pages/categoryPage.html?categoryId=3">Mother board</a></li>
<li><a href="/Pages/categoryPage.html?categoryId=4">Power supply</a></li>
<li><a href="/Pages/categoryPage.html?categoryId=5">Graphic card</a></li>
<li><a href="/Pages/categoryPage.html?categoryId=24">Processor</a></li>
<li><a href="/Pages/categoryPage.html?categoryId=6">Memory</a></li>
<li><a href="/Pages/categoryPage.html?categoryId=7">Computer case</a></li>
</ul>
这是我用来从 api 调用制作类别树的代码...
function makeCategoryTree(fetchedArray) {
var arr = fetchedArray;
var mapObject = {};
var node = {};
var categoryTree = [];
for (var j = 0; j < arr.length; j += 1) {
mapObject[arr[j].id] = j;
arr[j].children = [];
}
for (var j = 0; j < arr.length; j += 1) {
node = arr[j];
if (node.parentId !== null) {
arr[mapObject[node.parentId]].children.push(node);
} else {
categoryTree.push(node);
}
}
for (var i = 0; i < categoryTree.length; i++) {
extractedCategory = categoryTree[i];
renderCategory(extractedCategory,document.getElementById("category_list"));
}
}
这是我用来渲染和创建 html 元素的函数……在这里我觉得我需要改变一些东西,但我不知道是什么!任何帮助都会很棒!
function renderCategory(category,parent) {
var listItem = document.createElement("li");
listItem.innerHTML = category.name;
var categoryLink = document.createElement("a");
categoryLink.innerHTML = category.name;
categoryLink.setAttribute("href",`/Pages/categoryPage.html?categoryId=${category.id}`);
if (category.children.length > 0) {
parent.appendChild(listItem);
} else parent.appendChild(categoryLink);
for (var i = 0; i < category.children.length; i++) {
extractedSubCategory = category.children[i];
renderCategory(extractedSubCategory,listItem);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。