如何將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。