Question

我有一个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>

首先组织文件夹，然后组织文件夹文件，常规文件列表顺序（a-z）我看了很小的排序http://tinysort.sjeiti.com/ - 但这只适用于单个ul>li列表。

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

jsFiddle：http://jsfiddle.net/CezarisLT/8bK3f/

有人可以帮忙吗？

Answer 1

$('#files li span')与列表中的所有元素都不匹配。请尝试以下方法：

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

http://jsfiddle.net/WRqaE/

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

$('#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);
    }
});

http://jsfiddle.net/pC24j/

组织一个多维无序列表

1 个答案: