制作:メモ[記事の見出しから目次作成]

$(function() {	
	$(function() {	
	/* -------------------------------------------------------
		記事の見出しから目次作成
	--------------------------------------------------------*/
	function makeMokuji() {
		
		var idcount = 1;  // IDのカウント
		var mokuji = '';  // 目次のHTML格納場所
		var currentlevel = 0  // 見出しのレベル初期値
		
		// 見出しを回してリストに格納
		$('article h2, article h3, article h4').each(function(i){
			// 見出しごとにIDを保存
			this.id = 'chapter-' + idcount;
			idcount ++;
			// 見出しのレベル設定
			var level = 0;
			if(this.nodeName.toLowerCase() == 'h2') {
				level = 1;
			} else if(this.nodeName.toLowerCase() == 'h3') {
				level = 2;
			} else if(this.nodeName.toLowerCase() == 'h4') {
				level = 3;
			}
			// 見出しのレベルが現在のレベルよりも数値が大きければ
			// 
    を追加して入れ子にする while(currentlevel < level) { mokuji += '
      '; currentlevel ++; } // そうでなければ
    で閉じて入れ子を終了する while(currentlevel > level) { mokuji += '
'; currentlevel --; } // リストを生成 mokuji += '
  • ' + $(this).html() + '
  • \n'; }); // 現在のレベルが0より上ならリストを閉じる while(currentlevel > 0) { mokuji += ''; currentlevel --; } // HTML出力 strMokuji = '

    目次

    \
    ' + mokuji + '
    '; $('.mokuji').html(strMokuji); } makeMokuji(); });

    ‘article h2, article h3, article h4’で記事の見出しを指定できます。