Javascript 组织多维无序列表

我有一个

ul->ul…

列表，我想把它组织起来，它的设计有点奇怪，但它适合：

<ul id="files">
    <li class="folder">
        <span>folder 5</span>
        <ul>
            <li class="folder">
                <span>folder</span>
                <ul>
                    <li class="folder">
                        <span>folder</span>
                        <ul>
                            <li class="file">file1.js</li>
                            <li class="file">file2.js</li>
                        </ul>
                    </li>
                </ul>
                <li class="file">file.js</li>
            </li>
            <li class="folder">
                <span>folde1r</span>
                <ul>
                    <li class="file">file3.js</li>
                    <li class="file">file4.js</li>
                </ul>
            </li>
            <li class="folder">
                <span>folde2</span>
                <ul>
                    <li class="file">file3.js</li>
                    <li class="file">file4.js</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="file file.js">file5.js</li>
    <li class="file file.js">file2.js</li>
    <li class="file file.js">file1.js</li>
</ul>

jsFiddle：

有人能帮忙吗？

$（“#files li span'）

与列表中的所有元素不匹配。请尝试以下操作：

$('#files li').tsort();

如果还需要对文件夹进行排序，可以提供自定义排序功能，以始终将文件夹置于文件上方：

$('#files li').tsort('', {
    sortFunction: function(a, b) {
        if (a.e.hasClass('folder') && !b.e.hasClass('folder')) {
            return -1;
        } else if (!a.e.hasClass('folder') && b.e.hasClass('folder')) {
            return 1;
        }
        return a.s === b.s ? 0 : (a.s > b.s ? 1 : -1);
    }
});

---

不是

$（'li'）.tsort（）为您提供正确的结果@我不知道它是如何工作的，但确实是这样，谢谢你，把它作为一个答案贴出来，解释一下，我会给你+50。比如，it如何知道将文件夹向上移动到顶部？不要依赖DOM，它既慢又低效。使用适当的对象/数组在js中执行逻辑，然后只渲染一次。使用Backbone.js、Angular.js、Ember.js……但不要使用jQuery。请参阅我的答案。上述方法之所以有效，是因为在HTML中，文件夹已经位于文件上方（根据ul）。在我的回答中，我还解释了如何始终强制文件夹位于文件上方。
$('#files li').tsort('', {
    sortFunction: function(a, b) {
        if (a.e.hasClass('folder') && !b.e.hasClass('folder')) {
            return -1;
        } else if (!a.e.hasClass('folder') && b.e.hasClass('folder')) {
            return 1;
        }
        return a.s === b.s ? 0 : (a.s > b.s ? 1 : -1);
    }
});