我需要将一些“ul”和“li”标签转换为JavaScript对象。
我已成功将所有标签转换为对象，但我不知道如何应用继承来拥有包含子对象的第一个对象...
我在代码中使用递归函数:
var getDir = function(child) {
if(child.getAttribute('id')) {
var dir = child.getAttribute('id');
dir = dir.split("/");
dir.pop();
dir = dir.join("/");
return dir;
} else {
return "";
}
}
var getName = function(child) {
if(child.getAttribute('id')) {
var name = child.getAttribute('id');
name = name.split("/");
name = name.pop();
return name;
}
}
function Recursive(nodes, count)
{
if(nodes.childNodes)
{
for(let child of nodes.childNodes)
{
if(child.nodeType === 1 && child.tagName === "LI")
{
var content = new Object();
content.dir = getDir(child);
content.name = getName(child);
content.type = child.type;
if(child.getAttribute('class') && child.getAttribute('class') === "error") {
content.corrupted = true;
}
console.log(content);
console.log("-".repeat(count) + "element: " + child.tagName);
}
if(child.childNodes) {
Recursive(child, count+1);
}
}
}
}
Recursive(treeModule, 0);
treeModule 是 HTML 内容:
<ul>
<li id="myProject" type="folder">myProject
<ul>
<li id="myProject/css" type="folder">css
<ul>
<li id="myProject/css/main.css" type="file">main.css</li>
<li id="myProject/css/menu.css" type="file">menu.css</li>
<li id="myProject/css/user.css" type="file">user.css</li>
</ul>
</li>
<li id="myProject/fonts" class="empty" type="folder">fonts</li>
<li id="myProject/images" type="folder">images
<ul>
<li id="myProject/images/logo.png" class="error" type="file">logo.png</li>
</ul>
</li>
<li id="myProject/index.html" type="file">index.html</li>
<li id="myProject/js" type="folder">js
<ul>
<li id="myProject/js/controllers" type="folder">controllers
<ul>
<li id="myProject/js/controllers/core" type="folder">core
<ul>
<li id="myProject/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
</ul>
</li>
<li id="myProject/js/controllers/errors" type="folder">errors
<ul>
<li id="myProject/js/controllers/errors/error.js" type="file">error.js</li>
</ul>
</li>
<li id="myProject/js/controllers/home" type="folder">home
<ul>
<li id="myProject/js/controllers/home/homePage.js" type="file">homePage.js</li>
</ul>
</li>
<li id="myProject/js/controllers/home" type="folder">home
<ul>
<li id="myProject/js/controllers/user/list.js" type="file">list.js</li>
<li id="myProject/js/controllers/user/login.js" type="file">login.js</li>
<li id="myProject/js/controllers/user/profile.js" type="file">profile.js</li>
<li id="myProject/js/controllers/user/subscribe.js" type="file">subscribe.js</li>
</ul>
</li>
</ul>
</li>
<li id="myProject/js/libs" type="folder">libs
<ul>
<li id="myProject/js/libs/handlebars.min.js" type="file">handlebars.min.js</li>
<li id="myProject/js/libs/jquery.min.js" type="file">jquery.min.js</li>
<li id="myProject/js/libs/require.min.js" class="error" type="file">require.min.js</li>
</ul>
</li>
<li id="myProject/js/main.js" type="file">main.js</li>
<li id="myProject/js/models" type="folder">models
<ul>
<li id="myProject/js/models/menu.js" type="file">menu.js</li>
<li id="myProject/js/models/user.js" type="file">user.js</li>
<li id="myProject/js/models/users.js" type="file">users.js</li>
</ul>
</li>
</ul>
</li>
<li id="myProject/ressources" class="empty" type="folder">ressources</li>
<li id="myProject/views" type="folder">views
<ul>
<li id="myProject/templates/core" type="folder">core
<ul>
<li id="myProject/templates/core/footer.html" type="file">footer.html</li>
<li id="myProject/templates/core/header.html" type="file">header.html</li>
<li id="myProject/templates/core/menu.html" type="file">menu.html</li>
</ul>
</li>
<li id="myProject/templates/errors" type="folder">errors
<ul>
<li id="myProject/templates/errors/error401.html" type="file">error401.html</li>
<li id="myProject/templates/errors/error403.html" type="file">error403.html</li>
<li id="myProject/templates/errors/error404.html" class="error" type="file">error404.html</li>
</ul>
</li>
<li id="myProject/templates/home" type="folder">home
<ul>
<li id="myProject/templates/home/homePage.html" type="file">homePage.html</li>
</ul>
</li>
<li id="myProject/templates/home" type="folder">home
<ul>
<li id="myProject/templates/user/list.html" type="file">list.html</li>
<li id="myProject/templates/user/login.html" type="file">login.html</li>
<li id="myProject/templates/user/profile.html" type="file">profile.html</li>
<li id="myProject/templates/user/subscribe.html" type="file">subscribe.html</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
我希望最深的“li”成为我的对象中最深的 child ，如下所示:
{
"dir": "",
"name": "folder",
"type": "folder",
"children": [
{
"dir": "folder",
"name": "cascading",
"type": "folder",
"children": [
{
"dir": "folder/cascading",
"name": "1.css",
"type": "folder"
},
{
"dir": "folder/cascading",
"name": "2.css",
"type": "folder"
},
{
"dir": "folder/cascading",
"name": "3.css",
"type": "folder"
}
]
}
]
}
目前，我可以在控制台中显示每个对象及其深度(使用 console.log("-".repeat(count) + "element: "+ child.tagName); )
最佳答案
如果您正在寻找解决问题的结构 我认为应该有效
function Node(dirName,name,type){
this.dir=dirName;
this.name=name;
this.type=type;
}
function parentNode(dirName,name,type,childArray){
Node.call(this,dirName,name,type);
this.children=childArray;
}
parentNode.prototype=Object.create(Node.prototype);
var node1=new Node("folder/cascading","1.css","folder");
var node2=new Node("folder/cascading","2.css","folder");
var childArray=[];
childArray.push(node1);
childArray.push(node2);
var parentNode1=new Node("folder","cascading","folder",childArray);
我猜这个结构适用于 ul 和 li 的嵌套级别 这里 Node 对于父节点和子节点来说是通用的。 父节点将具有子节点作为额外属性
希望对你有帮助
关于javascript - JavaScript 对象的继承，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40196994/