[JS] H 태그에 넘버링 하기.

도쿠위키를 만들다보니 나무위키처럼 대제목에 숫자가 들어가는 것에 넘버링을 하고싶어 만들게 되었다. 다만, 목차에는 숫자가 적용되진 않는다.

개발은 jquery 로 했다.

아래의 소스를 시작할때 넣어주면 된다.

jQuery(document).ready(function(){

  listH = ["h1", "h2", "h3", "h4", "h5", "h6"];

  

  // 

  var prevId;

  var numReset = 1;

  for(var i=0; i < listH.length; i++){

    jQuery(listH[i]).each(function(idx, v){

      var text = jQuery(this).text();     // 문구

      // 최근 부모역 h 태그 찾기.

      var valueH = listH[i - 1];

      var prevAll = jQuery(this).prevAll(valueH);

      var parentH = jQuery(prevAll[0]);

      if(prevId != parentH.text()){

        numReset = 1;

        prevId = parentH.text();

      }

      // 번호 부여하기.

      var seqText = numReset + ". ";    // 제목에 찍힐 숫자.

      if(parentH != undefined){

        // 부모역 h 태그가 있다면 해당 태그의 번호표를 가져옴.

        var prevNum = parentH.find("span.titleNum").text();

        seqText = prevNum + seqText;

      }

      jQuery(this).html("<span class='titleNum'>" + seqText + "</span> " + text);

      numReset++;

    })

  }

})