我想在JavaScript中生成TOC,如下所示:
<ol>
<li>Heading 1</li>
<li>Heading 2
<ol>
<li>Heading 2-1</li>
<li>Heading 2-2</li>
</ol>
</li>
<li>Heading 3</li>
</ol>
以及上面生成TOC的HTML代码:
<section id="toc">
<p>This will be replaced with generated TOC.
</section>
<article>
<h1>Heading 1<h1>
<p>Bla bla bla.</p>
<h1>Heading 2<h1>
<p>Bla bla bla.</p>
<h2>Heading 2-1<h2>
<p>Bla bla bla.</p>
<h2>Heading 2-2<h2>
<p>Bla bla bla.</p>
<h1>Heading 3<h1>
<p>Bla bla bla.</p>
</article>
我真的被卡住了:(
您如何编写代码以生成目录?我更喜欢jQuery或纯JavaScript。
更新
这对我来说很难,但是我想我已经做到了:
$(function () {
var assigned_level = 0,
current_level = 0,
id_number = 1,
parent_node = "article",
toc_html = '';
$(parent_node + " *").each(function () {
if (this.nodeName.length === 2 && this.nodeName.charAt(0) === "H") {
$(this).attr("class", "heading");
}
});
$(".heading").each( function () {
current_level = this.nodeName.charAt(1);
$(this).attr('id', "toc-" + id_number);
// Close a list if a same level list follows.
if (assigned_level !== current_level - 1) {
toc_html += "</li>"
}
// Open parent lists if a child list follows.
while (assigned_level < current_level) {
toc_html += "<ol>";
assigned_level += 1;
}
// Close child lists and the parent list if
// the same level parent list follows.
while (assigned_level > current_level) {
toc_html += "</ol></li>";
assigned_level -= 1;
}
toc_html +=
'<li><a href="#' + this.id + '">' + $(this).html() + "</a>";
id_number += 1;
});
// Close everything
while (assigned_level > 0) {
toc_html += "</li></ol>";
assigned_level -= 1;
}
$("#toc").html(toc_html);
});
我还是不明白我做了什么:P也许有更复杂的方法。
请指出您发现的任何内容。
谢谢。
最佳答案
首先,您需要关闭h1,h2标签=)
如果您执行$("h1, h2, h3, h4, h5, h6")
,则将按照标签在文档中出现的顺序获得标签。因此,您可以对该阵列执行循环并检查级别。例如:如果最后一个标签是H1,而您找到了H2,则意味着您需要创建<ol>
。另一方面,如果您有一个H3,下一个是H2,则意味着您需要关闭<ol>
。
最困难的部分是最后关闭其余的<ol>
。
希望这可以帮助。