Question

如何从以下内容生成嵌套的有序列表？我已经搜索了论坛，现在工作了几个小时，根据源内容中的不同类生成有序列表。内容最多可以有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));

以上代码产生以下内容：

'<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>

非常感谢您的帮助。

Answer 1

这是我得到的。

＆＃13;

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);

＆＃13;

<div id='main'>

</div>

＆＃13;

这只是一个例子，并不完全是你拥有的数据（你可以想出来）。

我正在使用document.createElement创建新元素，然后使用appendChild将它们插入到相应的ol / li中。

最重要的部分是if (i !== 0)（更改此选项以适合您是否要从数组的开头或结尾开始）。这是我创建巢穴的部分。

我正在创建一个新的li，其中包含<p>和old_ol，即嵌套li。所以这个函数正在做的是创建最里面的ol，然后向上扩展它。

这可能有一个明确/更好的方法，但据我所知，这在香草JS中。我希望一切都很清楚。

JavaScript：如何生成嵌套的有序列表

1 个答案: