固定HTMLコードに基づいて目次を自動的に構築/コンパイル/作成する方法は？

Question

私は様々な見出しを持つ記事がたくさんある場合、どのようにそれらの記事すべてに対して自動的に柔軟な目次を作成/コンパイル/作成できますか？

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>"); 
    } 

最後に、CSSであなたのTable of Contentsをカスタマイズします。ここで

---

は実施例である：

$(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>