2012-09-02 3 views
1

이 스크립트를 찾고 있는데 찾을 수 없습니다. 많은 TOC 생성기이 있지만 모두 평평하거나 의사 다중 레벨입니다. 예를 들어 H1, H2 태그의 숫자를 기준으로합니다.번호 매기기로 다단계 TOC를 생성하는 jQuery 플러그인

내가 좋아, 간단한 중첩 HTML 구조를 갖는다 :

<div class="toc"><div class="toc_target" id="ch1">Chapter 1</div></div> 
<div class="toc"><div class="toc_target" id="ch2">Chapter 2</div></div> 
<div class="toc"><div class="toc_target" id="ch3">Chapter 3</div> 
    <div class="toc"><div class="toc_target" id="ch31">Chapter 31</div> 
</div> 
<div class="toc"><div class="toc_target" id="ch4">Chapter 4</div> 
    <div class="toc"><div class="toc_target" id="ch41">Chapter 41</div> 
     <div class="toc"><div class="toc_target" id="ch411">Chapter 411</div> 
    </div> 
</div> 

... 자동 번호와 내부 링크와 TOC가 필요 (HTML 구조는 평면 또는 중첩 될 수있다)

 
1. Chapter 1 
2. Chapter 2 
3. Chapter 3 
3.1. Chapter 31 
4. Chapter 4 
4.1. Chapter 41 
4.1.1. Chapter 411 

아무도 없습니까? 내가 혼자 싸워야했다 seemsthat

답변

0

...

function getLastNumberFromTocId(tocId) { 
    if (tocId.length==0) return ""; 
    arr=tocId.split("."); 
    return parseInt(arr[arr.length-2]); 
} 



/* 
Generates TOC. 
Attribute "toc_id" is added to each node in content to store its numbering. It is used later to calculate the children's numbering. 
First ideas from http://monochromacy.net/Post/Dynamic-Section-Numbers-and-Table-of-Contents-with-jQuery.aspx. 
*/ 
function generateTableOfContents(list) { 
var tocHtml = ''; 
list.each(function() { 
     var current = $(this); 

     // calculation of actual chapter number() 
     parentElement = current.parents(".toc"); 
     parentElementTocId = ""; 

     if (parentElement.size() == 1) parentElementTocId = parentElement.attr("toc_id"); 
     if (typeof parentElementTocId === "undefined") parentElementTocId = ""; 

     previousTocId = "0."; 
     previousToc = current.prev(".toc"); 
     if (previousToc.size() == 1) previousTocId = previousToc.attr("toc_id"); 

     localNumber = getLastNumberFromTocId(previousTocId) + 1; 
     currentTocId = parentElementTocId + localNumber + "."; 

     // store the result 
     current.attr("toc_id", currentTocId); 


     var headerElement = current.find(".toc-title").first(); 
     // text to be displayed 
     headerElement.prepend(currentTocId + " "); 
     var tocEntryText = headerElement.text(); 

     // get the link target 
     var tocEntryId = headerElement.attr("id"); 
     tocHtml += '<span class="toc-entry"><a href="#' + tocEntryId + '">' + tocEntryText + '</a></span>\n'; 
    }); 
return tocHtml; 

}

관련 문제