javascript - 将标题层次结构生成为有序列表

标签 javascript html methodology

我已经考虑了一段时间,但无法想出一个可行的解决方案。我什至不能伪代码...

例如,假设您有一个标题结构如下的页面:

<h1>Heading level 1</h1>

    <h2>Sub heading #1</h2>

    <h2>Sub heading #2</h2>

        <h3>Sub Sub heading</h3>

    <h2>Sub heading #3</h2>

        <h3>Sub Sub heading #1</h3>

        <h3>Sub Sub heading #2</h3>

            <h4>Sub Sub Sub heading</h4>

    <h2>Sub heading #4</h2>

        <h3>Sub Sub heading</h3>

使用 JavaScript(任何框架都可以),您将如何生成这样的列表:(带有嵌套列表)

<ol>
    <li>Heading level 1
        <ol>
            <li>Sub heading #1</li>
            <li>Sub heading #2
                <ol>
                    <li>Sub Sub heading</li>
                </ol>
            </li>
            <li>Sub heading #3
                <ol>
                    <li>Sub Sub heading #1</li>
                    <li>Sub Sub heading #2
                        <ol>
                            <li>Sub Sub Sub heading (h4)</li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>Sub heading #4
                <ol>
                    <li>Sub Sub heading</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

每次我尝试从某种方法开始时,它最终都会变得非常臃肿。

解决方案需要遍历每个标题并将其放入适当的嵌套列表中 - 我不断地对自己重复这个但我无法勾勒出任何东西!

即使您脑子里有方法但没有时间编写代码,我仍然想知道它! :)

谢谢!

最佳答案

这里的问题是没有任何好的方法可以按文档顺序检索标题。例如 jQuery 调用 $('h1,h2,h3,h4,h5,h6')将返回您所有的标题,但所有 <h1> s 将首先出现,然后是 <h2>等等。当您使用逗号分隔的选择器时,还没有主要的框架工作按文档顺序返回元素。

您可以通过为每个标题添加一个公共(public)类来解决这个问题。例如:

<h1 class="heading">Heading level 1</h1>

    <h2 class="heading">Sub heading #1</h2>

    <h2 class="heading">Sub heading #2</h2>

        <h3 class="heading">Sub Sub heading</h3>

    <h2 class="heading">Sub heading #3</h2>

    ...

现在选择器 $('.heading')会让它们井井有条。

下面是我将如何使用 jQuery 来实现:

var $result = $('<div/>');
var curDepth = 0;

$('h1,h2,h3,h4,h5,h6').addClass('heading');
$('.heading').each(function() {

    var $li = $('<li/>').text($(this).text());

    var depth = parseInt(this.tagName.substring(1));

    if(depth > curDepth) { // going deeper

        $result.append($('<ol/>').append($li));
        $result = $li;

    } else if (depth < curDepth) { // going shallower

        $result.parents('ol:eq(' + (curDepth - depth - 1) + ')').append($li);
        $result = $li;

    } else { // same level

        $result.parent().append($li);
        $result = $li;

    }

    curDepth = depth;

});

$result = $result.parents('ol:last');

// clean up
$('h1,h2,h3,h4,h5,h6').removeClass('heading');

$result现在应该是你的 <ol> .

另请注意,这将处理 <h4>接着是 <h1> (一次向下移动不止一个级别),但它不会处理 <h1>接着是 <h4> (一次不止一个级别)。

关于javascript - 将标题层次结构生成为有序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/497418/

相关文章:

testing - cxxtest 套件可以在运行时动态扩展吗?

modeling - 统一过程 (UP) 与统一建模语言 (UML)

javascript - Grunt Less 任务没有输出

javascript - 如何在sequalizejs LINUX环境中批量创建时保持顺序?

javascript - 重置功能,所以当时只有一个打开

javascript - 什么时候使用 "class"与 "id"?

javascript - 异步给出回调已经调用错误?

javascript - 在 Ajax 成功处理程序中处理 JSON 数据

html - HTML 中的原始打印 HTTP_REFERER 是否可用于 XSS?

reactjs - 现代 React.js 开发的正确 'workflow' 是什么?