如何自动生成目录答案

【问题标题】：How auto-generate a table of contents如何自动生成目录
【发布时间】：2013-12-16 18:04:12
【问题描述】：

我是 JavaScript 新手，对于学校来说，我必须自动使页面上的每个生成一个“ol”，每个“li”中都有一个指向页面上该标题所在位置的链接放在最后我有一个目录，每个“li”上都有链接。所以我应该能够只写文本而不用担心目录。有没有办法在不使用过于复杂的代码的情况下做到这一点？最好不要太长，以便我能理解。

例如

<h1 id="h1-01">Title 1<\h1>
<h1 id="h1-02">Titel 2<\h1>
<h1 id="h1-03">Titel 3<\h1>
<h1 id="h1-04">Titel 4<\h1>

让这个生成如下：

<ol>
<li><a href="h1-01">Title 1</a></li>
<li><a href="h1-02">Title 2</a></li>
<li><a href="h1-03">Title 3</a></li>
<li><a href="h1-04">Title 4</a></li>
</ol>

编辑：我不希望任何人完成我所有的家庭作业，这甚至只是家庭作业的一小部分。我想知道的是如何在没有太复杂的代码的情况下用 javascript 中的列表项制作一个有组织的列表。我已经找到了一种将每个标题文本放入变量的方法。这就是我所拥有的

function generate(){
var titels = new Array();
for(var i = 1;i<10;i++){
var test = 'h1-0'+ i;
    titels[i] = document.getElementById(test).textContent;  
}
}
-->
</script>

现在唯一的问题是我必须用这些变量制作一个列表，但我在互联网上没有找到任何有用的东西，我发现使用 Jquery ir 的所有内容都是针对某人的问题的。我还想要一种方法来计算我正在使用的标题数量，但这是另一个问题。真的有可能像我写的那样得到真正实现的代码吗？

喜欢：

html.write("<ol>");

for(var i = 1, i<10,i++){

html.write("<il>" + titels[i] +  "<\il>");

}

html.write("<\ol>")

【问题讨论】：

绝对有可能，但是，到目前为止你尝试了什么？
是的，这是可能的，无需大量代码。但是我们不会在这里从头开始完成您的所有作业
我认为您正在寻找这个 [SO Answer][1] [1]：stackoverflow.com/questions/187619/…

标签： javascript html list href

【解决方案1】：

开始提示：你可以在 jquery 的帮助下做到这一点。

喜欢这个 HTML：

 <ol id=contents></ol>

   <h1>Test</h1>
      bla bla 

      <h1> Test2 </h1>
      Ble ble ble

jquery：

 $(document).ready(function(){
     $("h1").each(function(){
         $("#contents").append("<li>" + $(this).html() + "</li>");
     });
 });

【讨论】：

【解决方案2】：

我不会做你的功课，但会为你指明一个好的方向。

尝试构建一个包含每个条目的 id 和标题的对象。从那里，您可以使用该对象构建几乎任何东西，包括有序列表。

当然，您可以将 h1 标记硬改写为列表项，但这不是正确的做法，也不是您应该学习的东西。

【讨论】：