Question

假设我有一个像这样编码的列表：

    <ul id="Folder" name="Folder">
    <li value="0">Top Folder</li>
    <li value="11">2nd Folder 01</li>
    <li value="17" class="third">---3rd Folder 01-01</li>
    <li value="18" class="third">---3rd Folder 01-02</li>
    <li value="383" class="fouth">------4th Folder 01-02-01</li>
    <li value="384" class="fifth">---------5th Folder 01-02-01-01</li>
    <li value="385" class="fifth">---------5th Folder 01-02-01-02</li>
    <li value="386" class="fifth">---------5th Folder 01-02-01-03</li>
    <li value="387" class="fifth">---------5th Folder 01-02-01-04</li>
    <li value="388" class="fifth">---------5th Folder 01-02-01-05</li>
    <li value="19" class="third">---3rd Folder 03</li>
    <li value="20" class="third">---3rd Folder 04</li>
    <li value="22" class="third">---3rd Folder 05</li>
    <li value="130" class="fouth">------5th Folder 01-02-05-01</li>
    <li value="131" class="fouth">------5th Folder 01-02-05-02</li>
    <li value="132" class="fouth">------5th Folder 01-02-05-03</li>
    <li value="133" class="fouth">------5th Folder 01-02-05-04</li>
    <li value="134" class="fouth">------5th Folder 01-02-05-05</li>
    <li value="398" class="fouth">------5th Folder 01-02-05-06</li>
    <li value="158">2nd Folder 02</li>
    <li value="257" class="third">---3rd Folder 02-01</li>
    <li value="258" class="third">---3rd Folder 02-02</li>
    <li value="259" class="third">---3rd Folder 02-03</li>
    <li value="16">2nd Folder 03</li>
    <li value="382" class="third">---3rd Folder 03-01</li>
    <li value="51" class="third">---3rd Folder 03-02</li>
    <li value="113" class="fouth">------4th Folder 03-02-01</li>
    <li value="125" class="fouth">------4th Folder 03-02-02</li>
    </ul>

我使用了jquery：

    $('li.fifth').wrapAll('<ul>');
    $('li.fouth').wrapAll('<ul>');
    $('li.third').wrapAll('<ul>');

所以我可以将所有第5，第4和第3个li组成一个组。

我现在遇到的问题是，我怎样才能将第5个ul组移动到第4个li父级？而第4个ul组进入第3个李等...

Answer 1

我没有找到使用.wrapAll的方法。

相反，我使用了prev + next选择器。

以下代码获得<li class="fifth">之后的第一个<li class="fouth">。然后它备份到前一个元素，即<li class="fouth">。然后它创建一个<ul>并开始将<li class="fifth">元素移入其中。最后，它将<ul>放在<li class="fouth">的末尾。

注意：<ul>是在DOM之外构建的，然后插入到DOM中。这样，DOM永远不会处于无效状态，其中<ul>是<li>的兄弟或类似的东西。

我把代码放在一个可以反复调用的函数中。

function moveToParent(parentClass, childClass) {
    $('li.' + parentClass + ' + li.' + childClass).each(function(e) {
        var $parentFolder = $(this).prev();
        var $ul = $('<ul/>');
        while ($parentFolder.next().is('li.' + childClass)) {
            $parentFolder.next().appendTo($ul);
        }
        $parentFolder.append($ul);
    });
}

moveToParent('fouth', 'fifth');
moveToParent('third', 'fouth');

Live Demo on jsfiddle

注意：我将“第四个”拼错为“fouth”，因为这就是你的html中的内容。

如何将李分组成ul然后进入父李？

1 个答案: