jQueryで記事内の特定タグを取り出し、自動で目次を設定する方法 | 東京都世田谷区 ホームページ制作 [k]id

jQueryで記事内の特定タグを取り出し、自動で目次を設定する方法

Category JavaScript Update 2015.06.25

twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

1、目次(index)の必要性

ブログで記事を書いているとどうしても長い記事に鳴ってしまう事があります。
そういう場合は読み手の事を考えて目次を設定するのが効果的かと思います。

しかし、その都度aタグ等でリンクを設定するのは骨の折れる作業ですので、
h3など指定したタグを元に自動で目次を指定できたら便利です。

sample 2015-06-20 22.44.41

今回はJQueryを利用し、上記のような自動目次を設定してみたいと思います。

2、jQueryの設置

下記をヘッダに記述しjQueryライブラリを読み込んてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

3、JavaScriptの記述

適当な箇所にJavaScriptを記述してください。

$(document).ready(function() {
var index_no = 1;
var mokuji_cont = '';
$(".cont_wrap h3",this).each(function(){
this.id = "no-" + index_no;
index_no++;
mokuji_cont += '<li><a href="#' + this.id + '">' + $(this).html() + "</a></li>";
});
if(mokuji_cont != ''){ 
$("#mokuji_cont").html("<ul>" + mokuji_cont + "</ul>");
}
});

解説

1行目

index_noで目次のIDを割り振っていきます。

2行目

mokuji_contに出力するタグを格納します。

3〜8行目

この例ではh3のタグを記事から探し、
1ーh3タグにIDを追加
2ー目次のタグを生成
を行っています。

9〜11行目

h3タグが記事内に存在するかチェックし、記事を整えています。

 

4、呼び出し方

目次を表示したい箇所に下記を記述してください。

<div id="mokuji_cont"></div>

 

ページトップへ
kid