带有Javascript的嵌套列表（TCPDF）

Question

我在几个星期内面临一个问题，我不知道。

我有一个有序列表，它是嵌套的。

 <html> <head> <style> OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item } </style> </head> <body> <ol> <li>Number One</li> <li>Number Two <ol> <li>Number Two - One</li> <li>Number Two - Two</li> <li>Number Two - Three</li> </ol> </li> <li>Number Three <ol> <li>Number Three - One</li> <li>Number Three - Two</li> <ol> <li>Number Three - Two - One</li> <li>Number Three - Two - Two</li> </ol> </ol> </li> <li>Number Four</li> </ol> </body> </html>

但是，我需要使用Javascript的方法（因为这些CSS规则不适用于TCPDF）。

因此，我无法弄清楚如何使用Javascript来实现函数来修改这些ol，li（嵌套元素-父级和子级）以添加编号1、2、2.1、2.2、3、3.1、3.1.2、3.2 .2没有CSS。

我已经知道我需要使用类似：

<script>
 function
 ...
    getElementById('li')
    getElementsByTagName('li')
 ...
</script>

感谢您的任何帮助。

Answer 1

第一，您与HTML不一致，有时您将子<ol>项嵌套在<li> ，有时则没有。 我将其归因于一个错误，并为您创建了一个递归函数，该函数的行为就像您始终嵌套它们一样，您可以在下面找到它。 它会更改HTML，因此您应该没有问题。

我要说的不一致发生在3-2-1 / 3-2-2，您在打开<ol>标记之前关闭了3-2的<li>标记，这使<ol>变成了3-3

 var root = document.getElementsByTagName('OL')[0]; recur(root) function recur(element, id, index) { id = id || ""; index = index || ""; if (element.tagName === "LI") { id = id ? (id + "." + index) : index; element.innerHTML = id + ". " + element.innerHTML; } Array.prototype.slice.call(element.children).forEach(function(el, ind) { ind++; recur(el, id, ind); }) }

 li { list-style: none; }

 <ol> <li>Number One</li> <li>Number Two <ol> <li>Number Two - One</li> <li>Number Two - Two</li> <li>Number Two - Three</li> </ol> </li> <li>Number Three <ol> <li>Number Three - One</li> <li>Number Three - Two <ol> <li>Number Three - Two - One</li> <li>Number Three - Two - Two</li> </ol> </li> </ol> </li> <li>Number Four</li> </ol>

带有Javascript的嵌套列表（TCPDF）

问题描述

1 个解决方案

解决方案1
1 2018-02-19 16:53:23

带有Javascript的嵌套列表（TCPDF）

问题描述

1 个解决方案

解决方案1 1 2018-02-19 16:53:23

解决方案1
1 2018-02-19 16:53:23