从单个javascript数组创建spyscroll html

Question

我想创建一个spyscroll-menu与无限数量的子菜单和项目从一个单一的数组。我有一个基于<h>标签创建数组的函数。因此，例如，如果我有以下<h>标签的内容:

<div id="whitepaper">
<h2></h2>
<h3></h3>
<h3></h3>
<h4></h4>
<h3></h3>
<h2></h2>
<h3></h3>
</div>

这个函数就是:

$(function() {
let list = [];
document.querySelectorAll('#whitepaper *').forEach(function(node) {
let element = $(node);
if (element.is('h1,h2,h3,h4,h5,h6')) {
let tag = element.prop("tagName");
let index = parseInt(element.prop("tagName").substring(1)) - 2;
list.push(index);
}
});
});

我想要的输出是:

<ul>
<li>
<h2>h2</h2>
<ul>
<li>
<h3>h3</h3>
</li>
<li>
<h3>h3</h3>
<ul>
<li>
<h4>h4</h4>
</li>
</ul>
</li>
<li>
<h3>h3</h3>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>h2</h2>
<ul>
<li>
<h3>h3</h3>
</li>
</ul>
</li>
</ul>

但是我真的搞不懂这个。这是我已经在尝试的:

<script>
$(function() {
let list = [];
document.querySelectorAll('#whitepaper *').forEach(function(node) {
let element = $(node);
if (element.is('h1,h2,h3,h4,h5,h6')) {
let tag = element.prop("tagName");
let index = parseInt(element.prop("tagName").substring(1)) - 2;
list.push(index);
}
});
function makeArray(keys, value) {
let variable = new Array();
let index = keys.shift();
if (!keys.length) {
variable[index] = value;
} else {
variable[index] = makeArray(keys, value);
}
console.log(variable[index]);
return variable;
}
let value = 'some value';
let result = makeArray(list, value);
var dump = JSON.stringify(result, null, 4);
$('#dump').html(dump)
});
</script>
<pre id="dump"></pre>
<div id="whitepaper">
<h2></h2>
<h3></h3>
<h3></h3>
<h4></h4>
<h3></h3>
<h2></h2>
<h3></h3>
</div>

谁能把我推向正确的方向?

Answer 1

您只需通过使用先前值

测试值来创建html代码

let list = [];
document.querySelectorAll('#whitepaper *').forEach(function(node) {
let element = $(node);
if (element.is('h1,h2,h3,h4,h5,h6')) {
let tag = element.prop("tagName");
let index = parseInt(element.prop("tagName").substring(1));
list.push(index);
}
});
let htmlcode = "<ul><li>"
var listlg = list.length;
for (i = 0; i < listlg; ++i) {
var h = "h" + list[i];
var hd = "<" + h + ">";
var he = "<" + h + "/>";
if( i == 0){
htmlcode += hd + h + he;
continue;
}

if(list[i] == list[i-1] ){
htmlcode += "</li><li>" + hd + h + he;
continue;
}
if(list[i] > list[i-1] ){
htmlcode += "<ul><li>" + hd + h + he;
continue;
}
if (list[i] < list[i - 1]) {
if (list[i] != 2) {
htmlcode += "</li></ul></li><li>" + hd + h + he;
}else{
var dif = list[i -1] - list[i] + 1;
htmlcode += "</li></ul>".repeat(dif) + "<ul><li>" + hd + h + he;
}
}

}

var dif = list[listlg -1] - 1;
htmlcode += "</li></ul>".repeat(dif);
$('#dump').html(htmlcode);
console.log('html ' + htmlcode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="whitepaper">
<h2></h2>
<h3></h3>
<h3></h3>
<h4></h4>
<h3></h3>
<h2></h2>
<h3></h3>
</div>
<pre id="dump"></pre>