[ jQuery ] 自動的に目次を生成する

jQuery で記事の中にある h2 要素を抜き出して、自動的に目次を生成するコードを試してみました。

基本的に、サイト内の目次を jQuery で自動で作成するチュートリアル を参考にさせて頂きました。 ありがとうございます。

設置方法

head 要素内に次の記述を追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>

次のコードを、どうにかして読み込ませます。

// 自動的に目次を生成する

tocdata = "";

tocdata = "<dl><dt>この記事の目次</dt><dd><ul>";

$("div#extended h2").each(function(i) { 
    var current = $(this); 
    current.attr("id", "title" + i); 
    tocdata += "<li><a href='#title" + i +  "'>" + current.html() + "</a></li>"; 
});

tocdata += "</ul></dd></dl>";

// div#extended 内の最初の h2 要素の前に追加
$("div#extended h2:first").before(tocdata);

参考にさせてもらったページ

目次自動生成の jQuery プラグインもあるみたいです。

ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。