在HTML

时间:2018-07-26 08:21:50

标签: jquery html

enter image description here

因此,我创建了一个目录,该目录根据html标题上放置的两个标签动态更新。两个标题分别是toc-item(这是显示的项目名称)和toc-level(这是项目级别),级别1是主要标题,然后随着级别的下降,这些项目缩进并更改其编号基于此。

为此的jquery代码为:

function drawOlForItems(itemsToDraw, parentIndex) {
    var $ol = $("<ol>");

    itemsToDraw.foreach(function (item, index) {
        var entryIndex = index + 1;
        var $li = $("<li class='toc-level-{0}'>".format(item.level));
        var itemIndex = parentIndex != null ? "{0}.{1}".format(parentIndex, entryIndex) : entryIndex;
        $li.append("<span class='entry-text'>{0}) {1}</span>".format(itemIndex, item.heading));
        //$li.append("{0}".format(item.heading));

        if (item.subItems.length) {
            var subItems = drawOlForItems(item.subItems, itemIndex);
            $li.append(subItems);
        }
        $ol.append($li);
    });

    return $ol;
}

以及将其注入其中的HTML:

<div id="inject-toc-here" style="font-family:'Century Gothic'" data-show-
numbers="" data-cssNumbering=""></div>

如图所示,它似乎工作正常。但是,在html中,标题“第4级V3”和“第3级Test2”实际上位于“ 1.2)Banking Details”标题下。所以无论如何,我可以使我的代码知道它在HTML中的位置,并根据该位置相应地确定子级别。

预先感谢。(是的,我的HTML完全正确,我已经尝试了多种方法,但似乎没有任何效果)

编辑: 使用开发工具后,我现在看到列表创建者选择了要附加的错误父对象。这是创建列表的代码。

 function getNestedItems() {
    var entries = [];
    var nested = [];

    $("[toc-item]").each(function (index, element) {
        var toc = new TocEntry();

        var $tocEntry = $(element);
        var level = parseInt($tocEntry.attr("toc-level"));
        var heading = $tocEntry.attr("toc-item");
        //var prevEntry = previous;

        var parent = nested.first(x => x.level == level - 1);

        toc.heading = heading;
        toc.level = level;
        toc.level = level;

        if (parent) {
            parent.subItems.push(toc);
        } else {
            nested = [];
            entries.push(toc);
        }

        nested.push(toc);

        //privates
        function TocEntry() {
            return {
                heading: heading,
                level: null,
                subItems: []
            };
        }
    });

您可能会看到发生了什么事,那就是first()选择器选择的是家庭电子邮件,而不是银行详细信息。有什么想法可以将银行详细信息用作父项吗?

0 个答案:

没有答案