因此,我创建了一个目录,该目录根据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()选择器选择的是家庭电子邮件,而不是银行详细信息。有什么想法可以将银行详细信息用作父项吗?