Question

我正在寻找这样的脚本，并且找不到任何。 有很多TOC发生器，但它们都是平坦的或伪多级的 - 例如它们基于H1，H2标签中的数字。

我有一个简单的嵌套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

任何人

Answer 1

似乎我不得不独自战斗......

    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;

}

jQuery插件，生成带有编号的多级TOC

1 个答案: