HTML
<div id="html">
<ul>
<li id="myFolder" type="folder">myFolder
<ul>
<li id="myFolder/fonts" class="empty" type="folder">fonts</li>
<li id="myFolder/index.html" type="file">index.html</li>
<li id="myFolder/js" type="folder">js
<ul>
<li id="myFolder/js/controllers" type="folder">controllers
<ul>
<li id="myFolder/js/controllers/core" type="folder">core
<ul>
<li id="myFolder/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
</ul>
</li>
<li id="myFolder/js/controllers/errors" type="folder">errors
<ul>
<li id="myFolder/js/controllers/errors/error.js" type="file">error.js</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
我想将 HTML 转换为几个像这样的对象:
{
"dir": "",
"name": "myFolder",
"type": "folder",
"children": [{
"dir": "myFolder",
"name": "fonts",
"type": "folder"
}, {
"dir": "myFolder",
"name": "index.html",
"type": "file"
}, {
"dir": "myFolder",
"name": "js",
"type": "folder",
"children": [{
"dir": "myFolder/js",
"name": "controllers",
"type": "folder",
"children": [{
"dir": "myFolder/js/controllers",
"name": "core",
"type": "folder",
"children": [{
"dir": "myFolder/tempjs/controllerslates/core",
"name": "menu.js",
"type": "file"
}]
}, {
"dir": "myFolder/js/controllers",
"name": "errors",
"type": "folder",
"children": [{
"dir": "myFolder/js/controllers/errors",
"name": "error.js",
"type": "file"
}]
}]
}]
}]
}
我不知道如何进行转换。我想我可以使用
document.getElementsByTagName('li');
或者类似的东西。但是,如何管理父级和子级链接以及如何将对象的变量与 HTML 属性链接起来?
最佳答案
这是我能得到的最接近的结果。享受吧。
var getIdBasedStructure = function(ulContainer) {
var output = [];
Array.prototype.forEach.call(ulContainer.children, function(el) {
if (el.nodeName == "LI") {
var ret = getIdSplits(el.id, el.type);
if (el.querySelectorAll("ul").length > 0) {
output.push({
dir: ret[0],
name: ret[1],
type: ret[2],
children: getIdBasedStructure(el.querySelectorAll("ul")[0])
});
} else {
output.push({
dir: ret[0],
name: ret[1],
type: ret[2]
});
}
}
});
return output;
};
var getIdSplits = function(id, type) {
var split = id.split("/");
var ret = [];
if (split.length > 3) {
ret[2] = split[split.length - 1];
ret[1] = split.slice(0, split.length - 1).join("/");
ret[0] = type;
} else {
ret[0] = split[0] ? split[0] : null;
ret[1] = split[1] ? split[1] : null;
ret[2] = type;
}
return ret;
}
var structure = getIdBasedStructure(document.querySelectorAll("#html > ul")[0]);
console.log(JSON.stringify(structure));
<div id="html">
<ul>
<li id="myFolder" type="folder">myFolder
<ul>
<li id="myFolder/fonts" class="empty" type="folder">fonts</li>
<li id="myFolder/index.html" type="file">index.html</li>
<li id="myFolder/js" type="folder">js
<ul>
<li id="myFolder/js/controllers" type="folder">controllers
<ul>
<li id="myFolder/js/controllers/core" type="folder">core
<ul>
<li id="myFolder/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
</ul>
</li>
<li id="myFolder/js/controllers/errors" type="folder">errors
<ul>
<li id="myFolder/js/controllers/errors/error.js" type="file">error.js</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
编辑:从 jQuery 转换为原生 JavaScript。
关于javascript - 从 HTML 代码创建 JavaScript 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40178305/