Question

我目前正在使用jQuery抓取所有具有“section”类的元素。我想要做的是创建这些部分的嵌套有序列表，其中子无序列表与部分层次结构匹配。

例如，下面是HTML格式：

<div class="section">
    <h1>Here's the section heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <div class="section">
        <h2>Here's the subsection heading</h2>
        <p>Duis a ornare elit. Sed non fermentum erat. Curabitur porttitor tempor condimentum.</p>
    </div>
</div>

这是我目前用于创建列表的for循环：

var list = $('<ol />');
$('.section').each(function (index, element) {
    var header = $(element).find(':first(:header)').text();
    var item = '<li>' + header + </li>';
    $(item).appendTo(list);
});

然而，这将返回一个平坦的单级列表。

<ol>
    <li>Here's the section heading</li>
    <li>Here's the subsection heading</li>
</ol>

我想要的是基于div的层次结构的格式化列表 - IE第二部分div嵌套在第一部分div中，因此第二部分应该嵌套在第一部分中。

<ol>
    <li>
        Here's the section heading
        <ul>
            <li>Here's the subsection heading</li>
        </ul>
    </li>
</ol>

我尝试了一些东西，但没有像我想要的那样格式化列表。任何帮助将不胜感激。

Answer 1

http://jsfiddle.net/Cx676/

function buildList(sections, list) {
    sections.each(function (index, element) {
        var header = $(element).children(':header').text();
        var item = '<li>' + header + '</li>';
        $(item).appendTo(list);
        var subsections = $(element).children('.section');
        if (subsections.length > 0) {
            var sublist = $('<ul/>');
            sublist.appendTo(list);
            buildList(subsections, sublist);
        }
    });
}

var list = $('<ol/>');
buildList($('body').children('.section'), list);
console.log(list)

你只需要解析直接的孩子，而不是找到。

Answer 2

这是我刚刚创建的类似解决方案的示例：

var html = "<ul><li>Here's the subsection heading</li></ul>";
function subSection(html){
    $('ol').each(function(){
        $(this).children('li:first-child').append(html);
    });
}
subSection(html);

这是JSFIDDLE

Answer 3

由'xfx'创建的小提琴的小更新。 http://jsfiddle.net/subhamsaha1004/Cx676/2/

代码看起来非常相似：

function buildList(sections, list) {
    sections.each(function (index, element) {
        var header = $(element).children(':header').text();
        var item = $('<li />');
        item.append(header);

        var subsections = $(element).children('.section');
        if (subsections.length > 0) {
            var sublist = $('<ul/>');
            buildList(subsections, sublist);
            sublist.appendTo($(item));
        }

        item.appendTo(list);
    });
}

var list = $('<ol/>');
buildList($('body').children('.section'), list);
$('#result').append(list);

根据类名创建嵌套列表

3 个答案: