アンカーリンクを自動的に増やす

タイトルの数に応じてアンカーリンクを自動で作成します。
wpのビジュアルエディタ部分で実装しました。ビジュアルエディタで見出し(h2)を追加するとその数に応じてアンカーリンクが増えます。静的なサイトでも十分活躍できそう。

See the Pen rJWrWV by nekuta (@nekuta) on CodePen.

HTML

<div class="topics_box">
  <!-- もしリンクあり見出しがあるなら<div class="topics_link">アンカーリンク</div>が出る -->
  <div class="topics_single_list">
    <!-- ここにアンカーリンクが生成される -->
  </div>
</div>
<h2 class="topics_content">
  <h2 class="ttl_link">見出し1</h2>
  <div class="topics_txt">
    本文
  </div>
  <h2 class="ttl_link">見出し2</h2>
  <div class="topics_txt">
    本文
  </div>
    <h2 class="ttl_link">見出し3</h2>
  <div class="topics_txt">
    本文
  </div>
</div>

js(jQuery)

$(function(){

var wrapper_single = $('.wrapper_single');

//空の配列を作る
var ttl_name = [];
var ttl_link = [];

//見出しがあるなら下記追加
if($('.ttl_link').length){
  $('.topics_box').prepend('<div class="topics_link">アンカーリンク</div>');
}else{
}

//eachでttl_linkをそれぞれ見る
$('.ttl_link').each(function(i){
  //見出しにidを連番を振る
   $(this).attr('id','link_' + (i+1));
   //ttl_nameにタイトルを格納
   var name =$(this).text();
   ttl_name.push(name);

   //ttl_linkにidを格納
   var link =$(this).attr('id');
   ttl_link.push(link);

   var single_list =$('.topics_single_list');
   single_list.append('<div><a href="#'+ttl_link[i]+'">'+ttl_name[i]+'</a></div>');
});
});

解説

//空の配列を作る
var ttl_name = [];
var ttl_link = [];

まず空の配列を2つ作ります。
ttl_nameに見出しの名前を、ttl_linkにアンカーリンクを入れる想定です。

//eachでttl_linkをそれぞれ見る
$('.ttl_link').each(function(i){
  //見出しにidを連番を振る
   $(this).attr('id','link_' + (i+1));
   //ttl_nameにタイトルを格納
   var name =$(this).text();
   ttl_name.push(name);

   //ttl_linkにidを格納
   var link =$(this).attr('id');
   ttl_link.push(link);

   var single_list =$('.topics_single_list');
   single_list.append('<div><a href="#'+ttl_link[i]+'">'+ttl_name[i]+'</a></div>');
});

存在する.ttl_linkをeachで回してattrでidを振っていきます。
そして先ほど作った空の配列に値を入れていきます。.pushは値を配列に追加するメソッド。
最後に配列の値を入れ込んで.topics_single_listへappendします。appendは要素を追加するメソッド。

参考サイト

jQueryのeach()で複数の要素、配列、オブジェクトをループ処理
jQueryを利用したDOM操作 要素の追加メソッドまとめ

  • コーダーのための計算機