見出しタグ（h1 ～ h6）を jQuery で取得して目次を自動的に作成するには？

HTML ページ内に配置された見出しタグ（h1 ～ h6）をページ読み込み時に jQuery で取得して、目次を自動的に作成・挿入する方法をご紹介いたします。

目次を作るには？

目次を作る手順は、以下の通りです。

HTML 内に配置された見出しタグ（h1 ～ h6）を取得します。
取得したタグに「id」属性をセットします。
取得したタグの内側の見出し文字列を取得し、a タグでくくって目次用テキストに追加します。
目次用テキストをページ上部に用意した ol タグ内に出力します。

このような手順で ページ読み込み時に時に目次を自動生成できます。

見出しタグ（h1 ～ h6）を取得するには？

jQuery では :header 属性を指定して、HTML ページ内に配置された見出しタグ（h1 ～ h6）のみをまとめて抽出・取得することが可能です！

サンプルコードは以下の通りです。

$(function(){
  $(':header').each(function(n){
  	console.log($(this).prop("tagName"));
  });
});

取得した見出しタグに id 属性をセットするには？

上記のサンプルで、取得した見出しタグ $(this) に id 属性をセットするのですが（a タグをクリックしたときにジャンプするターゲットになります）、まず id の値を決めておく必要があります。

他の要素と重複しないよう id を考慮しておく必要があるのですが、ここでは「タグ種類（h1 ～ h6）＋ “n”（前出・順序）」で組み合わされる文字列を id 属性にセットすることにします。

例えば、最初の h1 見出しの場合 →「id=’h11’」になります。

サンプルコードは以下のイメージです。

strSelectorID = $(this).prop('tagName') + n;
$(this).attr("id", strSelectorID);

取得したタグの内側の見出し文字列を取得し、a タグでくくって目次用リストに追加しておきます

取得したタグの内側の見出し文字列は $(this).text() で取得できます。この文字列を a タグでくくって（クリックすると対象となる見出しにジャンプします）目次用リストに追加しておきます。

サンプルコードはこんな感じです。

strMokuji += "<li><a href='#" + strSelectorID + "'>" + $(this).text() + "</a></li>";

目次用テキストをページ上部に用意した ol タグ内に出力

目次用リストを HTML ページ上部に用意した <ol id=’mokuji’></ol> タグ内に挿入します。

サンプルコードはこうなります…

$('ol#mokuji').append(strMokuji);

まとめ

上記をまとめると、こんな感じになります…

<ol id='mokuji'>
</ol>

<script>
  var strMokuji = "";
  var strSelectorID = "";
  $(function(){
    $(':header').each(function(n){
      strSelectorID = $(this).prop('tagName') + n;
      $(this).attr("id", strSelectorID);
      strMokuji += "<li><a href='#" + strSelectorID + "'>" + $(this).text() + "</a></li>";
    });
  });
</script>

このサンプルコードを少しいじって作成した、実際に運用中のページがこちらです。
https://soln-sns.net/business-matching/what-is-business-matching.php