【jQuery】皆がすなるもくじといふものをつくりき

もくじの役割

ページ内リンク

記事内容の要約

著者のためになる

実装コード

function get_sentense_index(){

  var sentenses = $('section.body_main h2');

  var list = $('<ul>');

  if ( sentenses.length > 0 ) {

    $.each(sentenses, function(idx, elem){

      var obj = $(elem);

      var li  = $('<li>');

      var id  = 'sentense_' + (idx + 1); 

      

      obj.attr('id', id);

      var link = $('<a>');

      link.attr('href', '#' + id).append(obj.text());

      li.append(link);

      list.append(li);

    });

    $('#sentense_index').append(list);

    $('#sentense_index_box').fadeIn(200);

  }

}



function toggle_sentense_menu(elem_selector){

  var target = $('div#sentense_index');

  var myself = $(elem_selector).first();

  if ( target.length > 0 ) {

    if ( target.is(':visible') ) {

      target.slideUp(300);

      myself.text('[もくじを表示する]');

    }

    else {

      target.slideDown(300);

      myself.text('[もくじを隠す]');

    }

  }

}



<section id="sentense_index_box" style="display:none;">

<p class="index_switch"><a href="">[もくじを隠す]</a></p>

<div id="sentense_index">

<p class="sentense_title">もくじ</p>

<script type="text/javascript">

$(document).ready(function(){

  get_sentense_index();

  set_smooth_scroll();

  $('#sentense_index_box .index_switch a').click(function(e){

    e.preventDefault();

    toggle_sentense_menu('#sentense_index_box .index_switch a');

  })

})

</script>

</div>

</section>

コード解説

1. 記事内から見出しの要素を抽出する
2. 順番に動的なidを設定する
3. ページ内リンクを生成し、リスト化
4. 目次として表示する

記事内から見出しの要素を抽出する

順番に動的なidを設定する

$.each(array, function(index, value){ --- some processes --- })

ページ内リンクを作成し、リスト化する