[jQuery]文章内の見出しにIDを振って目次を作成する（非階層）

やる。

完成イメージ
やっていく

完成イメージ

こんな感じで記事があるとする。

<article>
    <h2>タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2>タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2>タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2>タイトルタイトルタイトルタイトル</h2>
    ⋮
</article>

こんな感じにしたい。

<article>
    <h2 id="ttl_01">タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2 id="ttl_02">タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2 id="ttl_03">タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2 id="ttl_04">タイトルタイトルタイトルタイトル</h2>
    ⋮
</article>

で、記事に応じてこういう目次も作る。

<ul>
    <li><a href="#ttl_01"><span>タイトルタイトルタイトルタイトル</span></a></li>
    <li><a href="#ttl_02"><span>タイトルタイトルタイトルタイトル</span></a></li>
    <li><a href="#ttl_03"><span>タイトルタイトルタイトルタイトル</span></a></li>
    <li><a href="#ttl_04"><span>タイトルタイトルタイトルタイトル</span></a></li>
</ul>

やっていく

入れ子込みでこんな感じでHTML側を組むとする。

<nav>
</nav>
<article>
    <h2>タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2>タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2>タイトルタイトルタイトルタイトル</h2>
    ⋮
    <h2>タイトルタイトルタイトルタイトル</h2>
    ⋮
</article>

で、こうする。

$(function () {
    let navSet = '<ul>';
    $('#article').find('h2').each(function (index) {
        $(this).attr('id', 'ttl_' + (index + 1).toString().padStart(2, '0'));
        let num = $(this).attr('id');
        let ttl = $(this).text();
        navSet += '<li><a href="#' + num + '"><span>' + ttl + '</span></a></li>';
    })
    navSet += '</ul>';
    $(navSet).prependTo('nav');
})

<h2>を拾ったタイミングでidを振るついでに目次の内容も組み上げてしまう。

以上です。