[英]JavaScript: How to generate nested ordered list
How to generate nested ordered lists from the following content? 如何从以下内容生成嵌套的有序列表? I have searched the forum and worked for a few hours now to generate ordered lists based on the different classes from the source content.
我已经搜索了该论坛,并花了几个小时来根据源内容中不同的类生成有序列表。 The content may have up to 6 nesting level.
内容最多可以有6个嵌套级别。 What I need is to generate ordered lists based on the different classes.
我需要的是根据不同的类生成有序列表。 As shown in the sample content to get something like below outlined example content.
如示例内容所示,获得类似于以下概述的示例内容。
.firstclass => 1.
.secondclass => 1.
.thirdclass => 1.
.fourthclass => 1.
The code: 编码:
var cheerio = require('cheerio');
var $ = cheerio.load('<h1 class="header">First Header</h1><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="secondclass">Second Lorem ipsum dolor sit amet.</p> <p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p>', {
normalizeWhitespace: true,
xmlMode: true,
decodeEntities: false,
});
var myContent = $('p').each(function() {
var para = $(this).text();
return para;
});
var olClass = ['.firstclass', '.secondclass', '.thirdclass', '.fourthclass'];
function arrToOl(arr) {
var ol = $('<ol />'),
li = $('<li />');
for (var i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
li.append(arrToOl(arr[i]));
} else {
li = $('<li />');
li.append($(arr[i]));
ol.append(li);
}
}
return $.html(ol);
}
console.dir(arrToOl(olClass));
The above code produces the following: 上面的代码产生以下内容:
'<ol><li><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p></li><li><p class="secondclass">Second Lorem ipsum dolor sit amet.</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p></li><li><p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p></li><li><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p></li></ol>'
The desired result should be: 理想的结果应该是:
<ol>
<li>
<p class="firstclass">First Lorem ipsum dolor sit.</p>
</li>
<li>
<p class="firstclass">First Qui consequatur labore at.</p>
</li>
<li>
<p class="firstclass">First Lorem ipsum dolor sit amet.</p>
<ol>
<li>
<p class="secondclass">Second Lorem ipsum dolor sit amet.</p>
</li>
<li>
<p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p>
<ol>
<li>
<p class="thirdclass">Third Lorem ipsum dolor sit amet.</p>
</li>
<li>
<p class="thirdclass">Third Molestias optio quasi ipsam unde!</p>
<ol>
<li>
<p class="fourthclass">Fourth Lorem ipsum dolor sit.</p>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
Your help is really appreciated. 非常感谢您的帮助。
Here's what I got. 这就是我得到的。
let array = ["a", "b", "c", "d"]; var nested; function create_nested() { var old_ol; for (let i = 0; i < array.length; i++) { let new_ol = document.createElement("ol"); let new_li = document.createElement("li"); new_li.innerHTML = array[i]; new_ol.appendChild(new_li); if (i !== 0) { let nest_li = document.createElement("li"); let new_p = document.createElement("p"); new_p.innerHTML = "new stuff"; nest_li.appendChild(new_p); nest_li.appendChild(old_ol); new_ol.appendChild(nest_li); } old_ol = new_ol; nested = new_ol; } } create_nested(); document.getElementById('main').appendChild( nested);
<div id='main'> </div>
This is just an example and not exactly the data that you have (you can figure that out). 这仅是示例,并不完全是您所拥有的数据(可以弄清楚)。
What's happening is that I'm creating new elements using document.createElement
, after which I am inserting them into their corresponding ol/li using appendChild
. 发生的事情是,我正在使用
document.createElement
创建新元素,然后使用appendChild
将它们插入相应的ol / li中。
The most important part is the if (i !== 0)
(Change this to suit whether you want to start from the beginning or end of your array). 最重要的部分是
if (i !== 0)
(更改此值以适合您要从数组的开头还是结尾开始)。 This is the part where I am creating the nests. 这是我创建嵌套的部分。
I am creating a new li
, which has the <p>
and the old_ol
which is the nesting li. 我正在创建一个新的
li
,它具有<p>
和old_ol
这是嵌套li。 So what this function is doing, is creating the innermost ol, and expanding it upward. 因此,此功能正在执行的操作是创建最内层的ol,并将其向上扩展。
There might be a clear/better way of doing this, but this is as far as I know in vanilla JS. 可能有一个清晰/更好的方法,但这是我在香草JS中所知道的。 I hope everything is clear enough.
我希望一切都足够清楚。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.