使用编号生成多级 TOC 的 jQuery 插件答案

【问题标题】：jQuery plugin that generates multilevel TOC with numbering使用编号生成多级 TOC 的 jQuery 插件
【发布时间】：2012-08-27 10:56:34
【问题描述】：

我正在寻找这样的脚本，但找不到。 有很多 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>

...并且需要一个带有内部链接、自动编号的目录（HTML 结构可以是扁平的或嵌套的）：

1. 第 1 章 2.第2章 3.第3章 3.1。第31章 4.第4章 4.1。第41章 4.1.1。第411章

有人吗？

【问题讨论】：

标签： jquery tableofcontents

【解决方案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;

}

【讨论】：