自力でなんて大層なことを言ってますが、こんなものは簡単に考えたらものすごく簡単なものなのです。
難しく考えるなら、例えばULとかOLとかの親の下にLIを作って、そこに見出しを入れていくと考えるとこれは案外考える所が多いのはわかります。
なぜなら、見出しの数でループをしているので、本文中に、
- H3 大見出し1
- H4 小見出し1-1
- H4 小見出し1-2
- H3 大見出し2
- H4 小見出し2-1
- H4 小見出し2-2
- H4 小見出し2-3
こういうネスト(入れ子)になったものを作ろうとしたら案外考えさせられます。こういうのは他で解説があるのでそちらを参考にしてもらう方が良いですが、当初自分が考えていたものは、カウントアップとかカウントダウンを駆使せず、ulの中にliを作って、上記で言うなら
<li></li>
</ul>
こういう状態で始まって、liの部分をH3の見出しとして作ります。次にH4が来たら、最後のliの中にULがなければULを作って、UL LI ULにH4のLiを入れていくというのを繰り返します。最後のliと言うのが、ポイントでjQueryでは$("セレクタ ul").last().find("li")みたいな形で作れますが、これをすると、上記のH3の下にH4があるようなものは良いですが、そうでない場合に案外困ります。
- H5 見出し
- H3 大見出し1
- H4 小見出し1-1
- H4 小見出し1-2
- H3 大見出し2
- H4 小見出し2-1
- H4 小見出し2-2
- H4 小見出し2-3
こういうやつですね。記事を作る時に考えて作れば良いのですが、最初にちょっとしたことを書きたい時ってあると思うんです。それを大見出しにするかどうかって考えますよね。
なのでこういうリスト構造を持ったものではなく、もっとシンプルに見出しだけを抜き出して、その見出しの種類ごとにクラスを付け分けてインデントし、見た目的に階層的な感じにはしてあるものの実はただのdivと言うだけのもの、それが以下のサンプルです。
見出しを読み込んだ順に表示しているだけなので、構造は関係なく見出しの種類をswitchでクラスを分けているだけです。
途中でアンカーを作ったりしてますが、最後の部分で目次をクリックしたら目的の見出しにスクロールするための目印を作ってるだけです。目次部分はただのdivですからいじるのも好きなようにできます。
一応、ToCを入れてみましたが、これが本当に便利なのかどうなのかはわかりません。とりあえず様子を見ることにします。