番号付き目次のためのJavascript

Question

私はSharepoint wikiを作成しています。各記事には、見出しの見出しを使ってウィキペディアを持っていますが、InterWebzで見つかったjavascriptです。

<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の2つのレベル（インデントのレベルが2つしかない）を追加することになります。Jはレベル1の見出し（Element-H1、toc_Level1）常に増加しますが、レベル1の見出し（Element-H1、toc_Level1）が処理されるたびに0にリセットされますが、そのようにする方法はまったく分かりません。

EDIT：

しかし私は、彼らが唯一の目次の書式設定を定義し、ジャバスクリプトの残りの部分を追加しましたので、私は最初に、関連するそれらを考えるしませんでした。

<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を生成し、2番目のレベルの箇条書きが対応する上位レベルの箇条書きとハイパーリンク機能が失われ、もう1つが番号付けを完全に欠いていました）。

ソリューションは

var j = 0, k = 0; 

そしてなります。linkClass変数の値に基づいて、条件付きカウンタとカウンタリセットに入れ、単一のテキスト変数に入れGenerateTOC（）関数の下に追加の変数を追加することでした

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でそれらにリンクすることです。