Question

我一直在谷歌搜索和堆栈溢出很长一段时间，我被卡住了。
任务如下：对标题（1.到1.1.）和列表（{{}进行嵌套编号（1.1.1，<h2>，<h4>等） {1}}和<ol>）。复杂的问题是：

可能有任何数量的标题和列表（例如，一个<ul>可以有三个嵌套h2，第二个ol可以有两个h2，然后第一个h3有h3个，其中第二个h4有嵌套ul，依此类推，等等。编号应该唯一并在整个文档中进行观察。
该文档将成为人们不习惯使用HTML敏捷的模板，因此，类，数据属性等越少越好。

我已经做过的事情：

ol

任何建议都受到高度赞赏。

Answer 1

如果有人也像我一样需要它，我最后是如何完成它的首先，您需要按如下方式标记项目（标题和列表）：

<h2 class="item" data-level="1">Largest item</h2>
<h3 class="item" data-level="2">A smaller item</h3>
<ol class="item" data-level="3">
<li>Smallest item 1</li>
<li>Smallest item 2</li>
<li>Smallest item 3</li>
</ol>

注意：您必须手动设置data-level，到目前为止我无法做任何事情以下是代码，将其放在$(function() {}：

中

$("ol.item").each(function() {
    // There might be lots of <li>s, we don't want to set the attributes manually for each one
    $(this).find("li").each(function() {
        $(this).addClass("item").data("level", $(this).parent().data("level"));
    });
    $(this).removeClass("item"); // The <ol> does not need this anymore
});

indices = new Array();
$(".item").not("ol").each(function() { // Just in case, we don't need <ol>s
    var hIndex = parseInt($(this).data("level"));
    // Going to the next level
    if (indices.length - 1 > hIndex) {
        indices= indices.slice(0, hIndex + 1 );
    }
    // Going to the previous level
    if (indices[hIndex] == undefined) {
        indices[hIndex] = 0;
    }
    indices[hIndex]++;
    // Cutting off nulls and prepending the number to the item
    $(this).prepend($.grep(indices, Boolean).join(".") + ". ");
});

标题和列表的嵌套编号

1 个答案: