我想在JavaScript中生成TOC,如下所示:

<ol>
  <li>Heading 1</li>
  <li>Heading 2
    <ol>
      <li>Heading 2-1</li>
      <li>Heading 2-2</li>
    </ol>
  </li>
  <li>Heading 3</li>
</ol>

以及上面生成TOC的HTML代码:
<section id="toc">
  <p>This will be replaced with generated TOC.
</section>

<article>
  <h1>Heading 1<h1>
  <p>Bla bla bla.</p>

  <h1>Heading 2<h1>
  <p>Bla bla bla.</p>

    <h2>Heading 2-1<h2>
    <p>Bla bla bla.</p>

    <h2>Heading 2-2<h2>
    <p>Bla bla bla.</p>

  <h1>Heading 3<h1>
  <p>Bla bla bla.</p>
</article>

我真的被卡住了:(
您如何编写代码以生成目录?我更喜欢jQuery或纯JavaScript。

更新

这对我来说很难,但是我想我已经做到了:
  $(function () {
    var assigned_level = 0,
        current_level = 0,
        id_number = 1,
        parent_node = "article",
        toc_html = '';

    $(parent_node + " *").each(function () {
      if (this.nodeName.length === 2 && this.nodeName.charAt(0) === "H") {
        $(this).attr("class", "heading");
      }
    });

    $(".heading").each( function () {
      current_level = this.nodeName.charAt(1);

      $(this).attr('id', "toc-" + id_number);

      // Close a list if a same level list follows.
      if (assigned_level !== current_level - 1) {
        toc_html += "</li>"
      }

      // Open parent lists if a child list follows.
      while (assigned_level < current_level) {
        toc_html += "<ol>";
        assigned_level += 1;
      }

      // Close child lists and the parent list if
      // the same level parent list follows.
      while (assigned_level > current_level) {
        toc_html += "</ol></li>";
        assigned_level -= 1;
      }

      toc_html +=
        '<li><a href="#' + this.id + '">' + $(this).html() + "</a>";
      id_number += 1;
    });

    // Close everything
    while (assigned_level > 0) {
      toc_html += "</li></ol>";
      assigned_level -= 1;
    }

    $("#toc").html(toc_html);
  });

我还是不明白我做了什么:P也许有更复杂的方法。
请指出您发现的任何内容。

谢谢。

最佳答案

首先,您需要关闭h1,h2标签=)

如果您执行$("h1, h2, h3, h4, h5, h6"),则将按照标签在文档中出现的顺序获得标签。因此,您可以对该阵列执行循环并检查级别。例如:如果最后一个标签是H1,而您找到了H2,则意味着您需要创建<ol>。另一方面,如果您有一个H3,下一个是H2,则意味着您需要关闭<ol>

最困难的部分是最后关闭其余的<ol>

希望这可以帮助。

10-06 05:10
查看更多