ホーム / リンク /

Bloggerブログ|見出しに付けたid名を流用して目次を作る|jQuery

もくじ リンク

投稿2019年4月29日 更新

　前回紹介したもくじを生成するコードを使用すると、自分で設定したid名が「chapter-○○」というid名に上書きされてしまいます。
　これが原因でページ内リンクが無効になったり、デザインが崩れたりする恐れがあるので、そのような場合にはこのページで紹介するコードをご利用下さい。
　自分で設定したid名を生かした上で目次を生成することができます。

もくじ


見出しに設定したidをもくじに流用する場合のコード



if($(this).attr('id') == undefined){ this.id ='chapter-' + count; }

　上記のコードを下記のコードの代わりに貼り付けて下さい。
this.id = 'chapter-' + count;

　貼り付ける場所が分からない場合は、次項でまとめたものを載せているのでそちらをまるっとご利用ください。

コードの意味



　使用されている記号に合わせた日本語訳は以下の通りです。

もし($(この見出し)に.属性('id')が == 設定されていない)なら{
この見出しの.idを =chapter-1 chapter-2 chapter-3・・・;
}とする


コードをまとめたもの



もくじに生成する見出しがh2のみの場合



olを使用する場合
<script>
//<![CDATA[
$(function(){
var toc = '<div class="toctitle">もくじ</div><ol>';
var count = 0;
$('.post-body h2').each(function (){
count++;
if($(this).attr('id') == undefined){
this.id ='chapter-' + count;
}
toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a></li>';});
toc += '</ol>';
$('#toc').html(toc);
});
//]]>
</script>

ulを使用する場合
<script>
//<![CDATA[
$(function(){
var toc = '<div class="toctitle">もくじ</div><ul>';
var count = 0;
$('.post-body h2').each(function (){
count++;
if($(this).attr('id') == undefined){
this.id ='chapter-' + count;
}
toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a></li>';});
toc += '</ul>';
$('#toc').html(toc);
});
//]]>
</script>


id名の変化を検証ツールで確認！



　h2のみで構成された以下のHTML文書をアップロードして「id名を流用するコード」を使用する場合と、使用しない場合でid名の違いを確認してみます。なお確認するにあたってグーグルの検証ツールを使用します。

<div id="toc"></div>
<h2 id="a">h2タグのテキストがもくじに表示される（id名　a）</h2>
<h2>h2タグのテキストがもくじに表示される（id属性指定なし）</h2>
<h2 id="c">h2タグのテキストがもくじに表示される（id名　c）</h2>
<h2>h2タグのテキストがもくじに表示される（id属性指定なし）</h2>
<h2 id="e">h2タグのテキストがもくじに表示される（id名　e）</h2>

　
　５つのh2のうち上から1・3・5番目のh2には、それぞれa・c・eという名前のidを設定し、２・４番目のh2はidが未設定です。

id名を流用するコードを使用しない場合



　まず目次を生成しない状態(<div id="toc"></div>を記述しない)でidを確認します。

（記事ページのHTML）


（ブラウザ上の表示）

（検証ツールのキャプチャー画像）
　h2タグに設定したはずのa・c・eというidの値が「chapter-1,chapter-3,chapter-5」に変化しています。
　idを設定しなかったh2にもchapter-2,chapter-4という値が付与されています。

　では次に目次を表示するコードを加えて再度idを確認します。

（記事ページのHTML）
（ブラウザ上の表示）　目次が表示されました。

（検証ツールのキャプチャー画像）

　h2タグの方は先ほどと同じです。新たに生成されたaタグのhref属性の値に対応するidが設定されています。

id名を流用するコードを使用する場合



　ではコードを変えてもう一度同じ手順で確かめます。
まず目次を生成しない状態(<div id="toc"></div>を記述しない)でidを確認します。

（記事ページのHTML）


（検証ツールのキャプチャー画像）

　自分で設定したa,c,eというid属性の値はそのまま残り、idを設定しなかったものについてのみ、それぞれchapter-2 chaptger-4という値が付与されています。
　では目次を表示してidを確認します。


（検証ツールのキャプチャー画像）

　自分で設定したa,c,eという値はそのまま残り、idを設定しなかったものについてのみ、それぞれchapter-2 chaptger-4という値が付与されています。

検証の結果



　id名を流用するコードを使用すると、idの上書きを防ぐことができると確認できました。
　また「目次を生成するjQueryのコードを貼り付けると、もくじを表示するかどうかに関わらず、 （記事ページの）すべての見出しにidが設定される」ということも確認できました。
　この結果から、目次を生成するjQueryのコードは、もくじを使用する場合に限って記事ページのHTMLに記述する（かテンプレート化する）ようにして、もくじを使用しない記事にはコード自体を読み込ませないようにする、といった使い分けをすれば、ページの読み込み速度を上げることができると言えそうです。
　ただ目次の使用を中止するときに、ひとつひとつコードを削除しなければならないので手間がかかりそうですが・・・

QooQ