用列表項來創建嵌入式列表

Question

使用javascript和jQuery，我將瀏覽器中呈現的錶轉換爲列表。所以我有...

<ul id="side-navigation"> 
    <li></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li3"></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li3"></li> 
    <li class="li2"></li> 
    <li></li> 
    <li></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li2"></li> 
    <li class="li3"></li> 
    <li class="li3"></li> 
    <li class="li3"></li> 
    <li></li> 
</ul> 

但我想創建基於他們的類的嵌入式列表。像這樣...

<ul id="side-navigation"> 
    <li> 
     <ul>  
      <li class="li2"></li> 
      <li class="li2"></li> 
      <li class="li2"></li> 
      <li class="li2"></li> 
      <li class="li2"> 
       <ul> 
        <li class="li3"></li> 
       </ul></li> 
      <li class="li2"></li> 
      <li class="li2"></li> 
      <li class="li2"></li> 
      <li class="li2"></li> 
      <li class="li2"> 
       <ul> 
        <li class="li3"></li> 
       </ul></li> 
      <li class="li2"></li> 
     </ul></li> 
    <li></li> 
    <li> 
     <ul> 
      <li class="li2"></li> 
      <li class="li2"></li> 
     </ul> 
    </li> 
    <li> 
     <ul>  
      <li class="li2"></li> 
      <li class="li2"></li> 
      <li class="li2"> 
       <ul> 
        <li class="li3"></li> 
        <li class="li3"></li> 
        <li class="li3"></li> 
       </ul></li> 
     </ul> 
    </li> 
    <li></li> 
</ul> 

在這個網頁設計師，而不是程序員，試圖找出如何，我覺得一些聰明的人可能會有一個建議。謝謝！

Answer 1

只需添加一個jQuery腳本解析您的當前選項卡，並添加前/代碼後

$(".li3").before("<ul>"); 
$(".li3").after("</ul>"); 

這可能不是niciest解決方案，但應該workd

Answer 2

語義上說，這是很好的做法，將任何在元素內的ol或ul之內的html。例如。

<ul> 
    <li> 
     Hello 
    </li> 
    <li> 
     <ul> 
      <li>World</li> 
     </ul> 
    </li> 
</ul> 

因此，我認爲應該按如下步驟去做：

$(".li3").append('<ul><li class="yourClass">Your content here</li></ul>');