Question

我有以下HTML

<ol data-level="0">
    <li class="active">This is the data1</li>
</ol>
<ol data-level="1">
    <li class="active">This is the data2</li>
</ol>
<ol data-level="2">
    <li class="active">This is the data3</li>
</ol>
<ol data-level="3">
    <li class="active">This is the data4</li>
</ol>
<ol data-level="2">
    <li class="active">This is the data5</li>
</ol>
<ol data-level="2">
    <li class="active">This is the data6</li>
</ol>
<ol data-level="0">
    <li class="active">This is the data7</li>
</ol>

下面你可以看到上面HTML的结果（为了更好的可读性，我删除了一些html标签！）。 Indents

我必须根据此结果创建一个有效的无序列表。我搜索了stackoverflow，我遇到了多个解决方案。例如。利用递归函数。这个问题是我不知道如何传入属于'root'对象的对象（参见：How can I recursively create a UL/LI's from JSON data - multiple layers deep）。

目前我仍然坚持使用此代码：

var $root = $items.first();
var rootLvl = $root.data('level');
var prevLvl = rootLvl;

function recursiveCheck($next) {
    prevLvl = $next.data('level');
    var nextItem = $next.next();

    if (nextItem.data('level') > prevLvl) {
        console.log('check');
        recursiveCheck(nextItem);
    } else {
        console.log('break');
    }
}

recursiveCheck($root);

在'休息'我不知道如何回到之前的根元素。有人可以把我拉向正确的方向吗？

提前致谢！

编辑：我想要的结果是这样的：

    <ul>
        <li>Data 1
            <ul>
                <li> Data 2
                    <ul>
                        <li> Data 3
                            <ul>
                                <li>
                                    Data 4
                                </li>
                            </ul>
                        </li>
                        <li>Data 5
                        </li>
                        <li>Data 6
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Data 7
        </li>
    </ul>

更多信息

- level 1 
- - level 2 // this belongs to the first level 1
- - - level 3 // this belongs to level 2
- - - level 3 // this belongs to level 2
- - - level 3 // this belongs to level 2
- - level 2 // this belongs to the first level 1
- level 1 
- - level 2 // this belongs to the second level 1

在这个例子中，第一级1有两个2级子项，但其中一个也有3个3级子项。所以我必须找出如何获得更高级别的下一个项目。我能用“ - - - ”生成上面的字符串。我只是无法将其转换为无序列表。

解决，最终代码：

edu.saveSummary = function() {
    var dataLevel = 'edu-draggable-level';
    var node = $('[data-edu-draggable]').first();

    function parseUL() {
        var level = node.data(dataLevel);
        var ul = document.createElement("ul");

        while (node && node.data(dataLevel) === level) {
            var li = document.createElement("li");
            li.textContent = node.text();
            ul.appendChild(li);
            node = node.next();
            if (node && +node.data(dataLevel) > level) {
                li.appendChild(parseUL());
            }
        }

        return ul;
    }

    return parseUL();
};

Answer 1

这些方面应该有效：

var node = first_ol_node;

function parseUL() {
    var level = +node.children().first().data('level');
    var ul = document.createElement("ul");
    while (node && +node.children().first().data('level') === level) {
        var li = document.createElement("li");
        li.textContent = node.text();
        ul.appendChild(li);
        node = node.next();
        if (node && +node.children().first().data(level) > level) {
            li.appendChild(parseUL());
        }
    }
    return ul;
}

var ul = parseUL();

一个问题是你需要从函数返回解析后的ul节点，你还需要在源项上推进解析指针（在Javascript中，无法通过引用传递变量，你只能通过值传递。）

在这个解决方案中，我使用外部变量而不是参数来保持源项中的当前指针（在node = node.next()中高级），返回值是已解析的UL。

Javascript从有序列表创建递归无序列表

1 个答案: