プログラミング基礎知識

見出しタグ(h1 ~ h6)を jQuery で取得して 目次を自動的に作成するには?

パンくずリストの作り方~microdata サンプル

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

目次を作るには?

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

  1. HTML 内に配置された見出しタグ(h1 ~ h6)を取得します。
  2. 取得したタグに「id」属性をセットします。
  3. 取得したタグの内側の見出し文字列を取得し、a タグでくくって目次用テキストに追加します。
  4. 目次用テキストをページ上部に用意した 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

COMMENT

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