如何根据固定的HTML代码自动build/compile/make一个Table的目录？

Question

如果我有很多文章，标题各不相同，我如何才能 build/compile/make 为所有这些文章自动 Table 一个灵活的 Table 目录？

Answer 1

首先，您需要 jQuery 和所有文章的固定布局，例如 HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='post-content'>
<div class='table-of-contents'></div>
<div id='anchor-a'>Heading A</div>
<div id='anchor-b'>Heading B</div>
<div id='anchor-c'>Heading C</div>
<!-- and so on -->
</div>

其次，添加一行字-Table of Contents和一个未排序的HTML列表：

$('div.table-of-contents').html("<div>Table of Contents</div><ul></ul>");

三、在无序HTML列表中添加标题列表：

  $('div.post-content div[id^=anchor-]').each(function(){
    $('div.table-of-contents ul').append("<li><a href='#" + $(this).attr('id') + "'>" + $(this).text() + "</a></li>");
  }

最后，将 Table of Contents 自定义为 CSS。

这是一个工作示例：

$(document).ready(function(){
  $('div.table-of-contents').html("<div>Table of Contents</div><ul></ul>");
  $('div.post-content div[id^=anchor-]').each(function(){
    $('div.table-of-contents ul').append("<li><a href='#" + $(this).attr('id') + "'>" + $(this).text() + "</a></li>");
  });
});

div.table-of-contents {
  border: 2px solid black;
  display: inline-block;
}
div.table-of-contents div {
  font-size: x-large;
  font-weight: bold;
  padding: 5px;
  border-bottom: 1px solid black;
}
div.table-of-contents ul {
  padding: 5px 5px 5px 30px;
  margin: 0;
}
div.table-of-contents ul li {
  font-size: large;
}
div[id^="anchor-"] {
  margin-top: 1em;
  font-size: large;
  font-weight: bold;
}
div.footer {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='post-content'>
<div class='table-of-contents'></div>
<hr/>
<div id='anchor-a'>Heading A</div>
content of anchor-a
<hr/>
<div id='anchor-b'>Heading B</div>
content of anchor-b
<hr/>
<div id='anchor-c'>Heading C</div>
content of anchor-c
<hr/>
</div>
<div class='footer'>footer</div>

如何根据固定的HTML代码自动build/compile/make一个Table的目录？

How to build/compile/make a Table of Contents automatically based on a fixed HTML code?

jquery

autocomplete

tableofcontents