對於編號目錄的Javascript

Question

我正在放置一個Sharepoint維基和每篇文章我有一個維基百科喜歡目錄從標題使用我認爲是一個JavaScript，我在InterWebz上找到的目錄。

<style> 
#toc { 
display: table; 
border: 1px solid #aaa; 
background-color: #f9f9f9; 
font-size: 95%; 
padding: 7px; 
} 
#toC#tocHeader { 
font-weight: bold; 
text-align: center; 
} 
#toc a:before { /* content:"• "; */ } 
#toc a { line-height: 15px; margin: 10px; } 
#toc .toc_Level1 { margin-left: 5px; } 
#toc .toc_Level2 { margin-left: 15px; } 
#toc .toc_Level3 { margin-left: 25px; } 
#toc .toc_Level4 { margin-left: 35px; } 
</style> 
<div id="toc"></div> 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script type="text/javascript"> 
function GenerateTOC() { 
    $("#toc").append('<p id="tocHeader">Contents</p>'); 
    $(".ms-rteElement-H1, .ms-rteElement-H1B, .ms-rteElement-H2, .ms-rteElement-H2B, .ms-rteElement-H3, .ms-rteElement-H3B, .ms-rteElement-H4, .ms-rteElement-H4B").each(function(i) { 
var currentNode = $(this); 
    currentNode.attr("id", "title" + i); 
var linkClass = (currentNode.hasClass('ms-rteElement-H1') || currentNode.hasClass('ms-rteElement-H1B')) 
    ? "toc_Level1" 
    : (currentNode.hasClass('ms-rteElement-H2') || currentNode.hasClass('ms-rteElement-H2B')) 
    ? "toc_Level2" 
    : (currentNode.hasClass('ms-rteElement-H3') || currentNode.hasClass('ms-rteElement-H3B')) 
    ? "toc_Level3" 
    : (currentNode.hasClass('ms-rteElement-H4') || currentNode.hasClass('ms-rteElement-H4B')) 
    ? "toc_Level4" 
    : ""; 
    $("#toc").append("<a id='link'" + i + "' class='" + linkClass + "' href='#title" + i + "' title='" + currentNode.attr("tagName") + "'>" + currentNode.html() + "</a><br>"); 
    currentNode.append(" <a href='#tocHeader'>[top]</a>"); 
    }); 
} 
_spBodyOnLoadFunctionNames.push('GenerateTOC'); 
</script> 

我的目的是使內容縮進的每個級別分別編號表中，如：

1. Heading 1 
    1.1. Heading 2  
    1.2. Heading 2 
2. Heading 1 
    2.1. Heading 2 
    2.2. Heading 2 

雖然我多多少少明白什麼是在此代碼發生的事情我絕對沒有知識的javascript（或者是關於這個問題的web開發 - 我不知道我現在怎麼做到了，現在我要說實話），所以我很少知道如何實現它。我可以看到該函數已經有一個計數器來生成內部鏈接。我的策略是增加兩個額外的變量，比如J和K（我只有兩個縮進級別），其中J只會在1級標題（Element-H1，toc_Level1）和K會增加總是增加，但每當處理1級標題（Element-H1，toc_Level1）時都會重置爲0，但是我完全不知道如何實現此目的。

編輯：

我添加的JavaScript的其餘部分，但它們只定義表的內容的格式，所以我並不認爲他們在第一個相關的。

<span class="ms-rteElement-Name">NAME</span> 
<hr/> 
<span class="ms-rteElement-Section">Section1</span> 
<hr/> 
<span class="ms-rteStyle-Text">Stuff</span> 
<p><span class="ms-rteElement-Section">Section2</span></p> 
<hr/> 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
<p><span class="ms-rteElement-H1">Heading 1</span></p> 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
<p><span class="ms-rteElement-H2">Heading 2</span></p> 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
<p><span class="ms-rteElement-H2">Heading 2</span></p> 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
<p><span class="ms-rteElement-H1">Heading 1</span></p> 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
<p><span class="ms-rteElement-H2">Heading 2</span></p> 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
<p><span class="ms-rteElement-H2">Heading 2</span></p> 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
<span class="ms-rteElement-Section">Section3</span> 
<hr/> 
<p><span class="ms-rteStyle-Text">More fluff</span></p> 

如上面給出的腳本生成表的內容完美，只是沒有當然的前述數字：

網站的結構如下。

Answer 1

所以我終於想通了。不幸的是沒有一個答案給出了想要的結果（其中一個生成了ToC，其中第二級子彈也錯過了相應的更高級別的子彈，並且超鏈接功能丟失;另一個完全沒有編號）。

解決的辦法是添加一個基於linkClass變量的值GenerateTOC（）函數

var j = 0, k = 0; 

然後把在有條件的計數器和計數器復位下額外的變量，並把它們放在一個文本變量

linkClass == "toc_Level1"  
    ? (j++, k = 0)  
    : linkClass == "toc_Level2"  
    ? k++  
    : ""; 

var l = k == 0 
    ? (String(j) + ". ") 
    : (String(j) + "." + String(k) + ". "); 

然後在創建ToC條目的行中的「currentNode.html」前添加了文本變量。

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>  
<script type="text/javascript">  
function GenerateTOC() {  
var j = 0, k = 0; // counters  

    $("#toc").append('<p id="tocHeader">Contents</p>');  
    $(".ms-rteElement-KD_Heading1, .ms-rteElement-KD_Heading2").each(function(i) { 

var currentNode = $(this); 

    currentNode.attr("id", "title" + i); 

var linkClass = (currentNode.hasClass('ms-rteElement-KD_Heading1') || currentNode.hasClass('ms-rteElement-H1B'))  
    ? "toc_Level1"  
    : (currentNode.hasClass('ms-rteElement-KD_Heading2') || currentNode.hasClass('ms-rteElement-H2B'))  
    ? "toc_Level2"  
    : ""; 

linkClass == "toc_Level1"  // runs the counters 
    ? (j++, k = 0)  
    : linkClass == "toc_Level2"  
    ? k++  
    : ""; 

var l = k == 0  // concatenates the counters 
    ? (String(j) + ". ")  
    : (String(j) + "." + String(k) + ". "); 

    $("#toc").append("<a id='link'" + i + "' class='" + linkClass + "' href='#title" + i + "' title='" + currentNode.attr("tagName") + "'>" + l + currentNode.html() + "</a><br>");  
    currentNode.append(" <a href='#tocHeader'>[top]</a>");  
    });  
}  
_spBodyOnLoadFunctionNames.push('GenerateTOC');  
</script> 

Answer 2

一個可能的解決方案

function GenerateTOC() { 
    $("#toc").append('<p id="tocHeader">Contents</p>'); 
    $(".ms-rteElement-H1, .ms-rteElement-H1B, .ms-rteElement-H2, .ms-rteElement-H2B, .ms-rteElement-H3, .ms-rteElement-H3B, .ms-rteElement-H4, .ms-rteElement-H4B").each(function(i) { 
    var currentNode = $(this); 
    currentNode.attr("id", "title" + i); 
    var linkClass = (currentNode.hasClass('ms-rteElement-H1') || currentNode.hasClass('ms-rteElement-H1B')) ? 
     "toc_Level1" : 
     (currentNode.hasClass('ms-rteElement-H2') || currentNode.hasClass('ms-rteElement-H2B')) ? 
     "toc_Level2" : 
     (currentNode.hasClass('ms-rteElement-H3') || currentNode.hasClass('ms-rteElement-H3B')) ? 
     "toc_Level3" : 
     (currentNode.hasClass('ms-rteElement-H4') || currentNode.hasClass('ms-rteElement-H4B')) ? 
     "toc_Level4" : 
     ""; 
    $("#toc").append("<a id='link'" + i + "' class='" + linkClass + "' href='#title" + i + "' title='" + currentNode.attr("tagName") + "'>" + currentNode.html() + "</a><br>"); 
    currentNode.append(" <a href='#tocHeader'>[top]</a>"); 
    }); 

    // level 1 
    $(".ms-rteElement-H1, .ms-rteElement-H1B").each(function(index, el) { 
    $(this).html(index + '. ' + $(this).text()); 
    // level 2 
    $('.ms-rteElement-H2, .ms-rteElement-H2B', this).each(function(idx, child) { 
     $(this).html(index + '.' + idx + ' ' + $(this).text()); 
    }); 
    }); 
} 

Answer 3

產生的有序列表一個解決方案，它應該能夠更深的文檔工作：

function levelClassName(level) { 
 
    if (typeof level !== "number") { 
 
    throw new Error("Wrong argument type"); 
 
    } 
 

 
    return "ms-rteElement-H".concat(level.toString(10)); 
 
} 
 

 
function elementLink(element) { 
 
    return $("<li></li>").text($(element).text()); 
 
} 
 

 
function generateTOC() { 
 
    var level = 1, // list level 
 
    tocList = $("<ol></ol>"), // top level list 
 
    lastElement = tocList; 
 

 
    $("#toc").append('<p id="tocHeader">Contents</p>'); 
 
    $("#toc").append(tocList); 
 

 
    $("span").each(function(index, value) { 
 
    // make a jQuery object out of current element once instead of doing it 
 
    // every time I want to use it 
 
    var element = $(value), 
 
     newElement; 
 

 
    if (element.hasClass(levelClassName(level))) { // same level 
 
     newElement = elementLink(value); 
 
     // append inside list tag or next to last tag if it isn't a list 
 
     lastElement[lastElement.prop("tagName") === "OL" ? 
 
     "append" : 
 
     "after"](newElement); 
 
     lastElement = newElement; 
 
    } else if (element.hasClass(levelClassName(level + 1))) { // deeper 
 
     newElement = elementLink(value); 
 
     // make a new list tag for the deeper level 
 
     lastElement.append($("<ol></ol>").append(newElement)); 
 
     lastElement = newElement; 
 
     level += 1; 
 
    } else if (level - 1 >= 1 && // shallower 
 
     element.hasClass(levelClassName(level - 1))) { 
 
     newElement = elementLink(value); 
 
     lastElement // list element 
 
     .parent().parent() // -> list (on same level) -> list element above 
 
     .after(newElement); 
 
     lastElement = newElement; 
 
     level -= 1; 
 
    } 
 
    }); 
 
} 
 

 
$(document).ready(generateTOC);

#toc { 
 
    display: table; 
 
    border: 1px solid #aaa; 
 
    background-color: #f9f9f9; 
 
    font-size: 95%; 
 
    padding: 7px; 
 
} 
 

 
#toC#tocHeader { 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
#toc a:before { 
 
    /* content:"• "; */ 
 
} 
 

 
#toc a { 
 
    line-height: 15px; 
 
    margin: 10px; 
 
} 
 

 
#toc .toc_Level1 { 
 
    margin-left: 5px; 
 
} 
 

 
#toc .toc_Level2 { 
 
    margin-left: 15px; 
 
} 
 

 
#toc .toc_Level3 { 
 
    margin-left: 25px; 
 
} 
 

 
#toc .toc_Level4 { 
 
    margin-left: 35px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toc"></div> 
 
<span class="ms-rteElement-Name">NAME</span> 
 
<hr/> 
 
<span class="ms-rteElement-Section">Section1</span> 
 
<hr/> 
 
<span class="ms-rteStyle-Text">Stuff</span> 
 
<p><span class="ms-rteElement-Section">Section2</span></p> 
 
<hr/> 
 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
 
<p><span class="ms-rteElement-H1">Heading 1</span></p> 
 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
 
<p><span class="ms-rteElement-H2">Heading 2</span></p> 
 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
 
<p><span class="ms-rteElement-H2">Heading 2</span></p> 
 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
 
<p><span class="ms-rteElement-H1">Heading 1</span></p> 
 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
 
<p><span class="ms-rteElement-H2">Heading 2</span></p> 
 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
 
<p><span class="ms-rteElement-H2">Heading 2</span></p> 
 
<p><span class="ms-rteStyle-Text">Fluff</span></p> 
 
<span class="ms-rteElement-Section">Section3</span> 
 
<hr/> 
 
<p><span class="ms-rteStyle-Text">More fluff</span></p>

沒有代碼使鏈接可點擊。做到這一點的最好方法是爲每個標題提供唯一的id，然後在ToC中鏈接到它們。