我正在开发一个 chrome 扩展,需要根据类别生成嵌套的 DOM 元素。这些类别保存为数组中的字符串。子类别的层级通过路径显示。
这是一个简单的例子
类别数组:
let categories = [a, a/b, b, b/c/d];
我想生成这样的嵌套 div 元素:
<div id="a">
<div id="b"></div>
</div>
<div id="b">
<div id="c">
<div id="d"></div>
</div>
</div>
以我目前的状态,我只创建了独特的顶级 div,并且不知道如何在顶级 div 中生成独特的子类别。
categories.forEach(function (i) {
let splitedCategory = i.split('/');
let parentID = String(splitedCategory[0]);
let parentElement = document.getElementById(parentID);
if(!containerElement.contains(parentElement)) {
containerElement.innerHTML += '<div id="' + i + '"></div>';
}
});
最佳答案
let categories = ['a', 'a/b', 'b', 'b/c/d'];
function f(str, html = ''){
str = str.split('/');
html += `<div id="${str[0]}">`
if(str.length > 1){
html += f(str.slice(1).join("/"));
}
html += `</div>`;
return html;
}
categories.map(a=>console.log(f(a, '')))
关于javascript - 根据字符串路径生成div元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50686001/