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

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里成了一团。

现在我遇到的问题是，我如何将第5个ul组移动到第4个li父节点？并将第4个ul组变成第3个li等...

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。