Automatically generate table of contents using jQuery

サイト内の目次をjQueryで自動で作成するチュートリアル。
jQueryで、h1〜3タグのヘッドラインを自動で抽出し、以下のように「Table of Contents」としてヘッダに表示するチュートリアルです。
コンテンツが仮に変わったとしても、jQueryで自動でやってくれるため、目次作成がかなり作成が楽になりそうです。



デモページ

コードは以下のように、プラグインにするほどではない簡単なコードで実現できています。

$("#toc").append('<p>In this article:</p>') 
$("h1, h2, h3").each(function(i) { 
    var current = $(this); 
    current.attr("id", "title" + i); 
    $("#toc").append("<a id='link" + i + "' href='#title" + i + "' title='" + current.attr("tagName") + "'>" + current.html() + "</a>");
});

これは、とてもいいアイデアですね。

関連エントリ

• 現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開