Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/463.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
JavaScript:如何生成嵌套有序列表_Javascript_Html_Node.js_Cheerio - Fatal编程技术网

JavaScript:如何生成嵌套有序列表

JavaScript:如何生成嵌套有序列表,javascript,html,node.js,cheerio,Javascript,Html,Node.js,Cheerio,如何从以下内容生成嵌套的有序列表?我搜索了论坛,花了几个小时的时间根据源内容中的不同类生成有序列表。内容最多可以有6个嵌套 水平。 我需要的是根据不同的类生成有序列表。如示例内容所示,以获得如下所述的示例内容 .firstclass => 1. .secondclass => 1. .thirdclass => 1. .fourthclass => 1. 守则: var cheerio = require('cheeri

如何从以下内容生成嵌套的有序列表?我搜索了论坛,花了几个小时的时间根据源内容中的不同类生成有序列表。内容最多可以有6个嵌套 水平。 我需要的是根据不同的类生成有序列表。如示例内容所示,以获得如下所述的示例内容

.firstclass => 1. 
    .secondclass => 1.
        .thirdclass => 1.
            .fourthclass => 1.
守则:

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));
var cheerio=require('cheerio');
var$=cheerio.load('First Header

First Lorem ipsum Door sit.

第一个Qui消费劳工在

第二个Lorem ipsum Door sit amet.

第三个Lorem ipsum Door sit=“第二类”>第二类”>第四类”

第四类”

第一类”

第三类”

{ 空白:对, xmlMode:true, 错误:错误, }); var myContent=$('p')。每个(函数(){ var para=$(this.text(); 返回段; }); 变量olClass=['.firstclass','.secondclass','.thirdclass','.fourthclass']; 功能arr工具(arr){ 变量ol=$(''), li=$(“
  • ”); 对于(变量i=0;i”); li.追加($(arr[i]); ol.append(li); } } 返回$.html(ol); } console.dir(arrToOl(olClass));
  • 上述代码产生以下结果:

    '<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>'
    
  • 一等劳动报酬。

    一等劳动报酬。

    一等劳动报酬。

  • 二等劳动报酬报酬。

    二等劳动报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬报酬第三级“>第三级洛雷姆-伊普苏姆-多洛尔坐位。

    第三级洛雷姆-伊普苏姆-多洛尔坐位。

    第四级洛雷姆-伊普苏姆-多洛尔坐位。

  • 预期结果应为:

       <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>
    
    
    
  • 第一个Lorem ipsum dolor-sit

  • 第一次在

  • 第一个Lorem ipsum dolor sit amet

  • 第二种知识是平等的

  • 第二个知识点是同一个知识点

  • 第三种颜色是同色的

  • 第三分子选择准同色

  • 第四个Lorem ipsum dolor-sit

  • 非常感谢你的帮助。

    这是我得到的

    let数组=[“a”、“b”、“c”、“d”];
    var嵌套;
    函数create_nested()
    {
    var old_ol;
    for(设i=0;i

    为了帮助我们和您自己了解可读代码,您可以使用
    `
    (backticks)代替引号来生成多行代码您所说的“最重要的部分是
    if(i!==0)
    (更改此项以适合您是从数组的开始还是结束开始)。这是我创建巢穴的部分。”?我现在正在使用你建议的方法。我还没有让它工作,因为我正在将它转换为cheerio.js。
    if(I!==0)
    表示从数组的开头开始,第一个元素是最里面的
    ol
    。如果从数组的末尾开始,请使用
    If(i!==array.length-1)
    。如果所有这些都太复杂,那么就用我写的内容,看看你的内容是否正确。如果不正确,那么就反转你的数组。至于cheerio.js,我不知道它是如何工作的。