如何自动生成目录

How auto-generate a table of contents

本文关键字：自动生成      更新时间：2023-12-21

我是JavaScript的新手，对于学校来说，我必须自动使每个<''h1>在我的页面上生成一个"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>")

我不会做你的家庭作业，但会给你指明一个好的方向。

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

当然，您可以将h1标记硬重写为列表项，但这不是正确的方法，也不是您应该学习的内容。

启动提示：你可以在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>");
     });
 });
相关文章：