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

タイトルの数に応じてアンカーリンクを自動で作成します。
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">
  <h２ 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>

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 = [];

まず空の配列を２つ作ります。
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は要素を追加するメソッド。