格式列表爲列，當有嵌套

Question

給出一個無序列表任意長度，但僅過1嵌套的附加級別：

<nav id="top_nav"> 
    <nav id="nav1"> 
    <ul> 
     <li>saws</li> 
     <li>drills 
     <ul> 
      <li>hammer-drills</li> 
      <li>drill-drivers</li> 
     </ul> 
     </li> 
    </ul> 
    </nav> 
    <nav id="nav2">...</nav> 
    <nav id="nav3">...</nav> 
</nav> 

我想打破了原有的列表到格式化列表的列同胞列表（每隔14個元素分割）。

搜索插件後，我發現沒有列出基於內部li的嵌套列表。我想我會寫我自己的腳本，我會將列表分成額外的第一層ul並將它們左移（這是我迄今爲止所得到的）：

對於每個導航塊，我獲取li元素的大小和找到分割點：

var max_height = 14; 
$('#top_nav nav').each(function(){ 
    //step 1: mark 2nd tier li's with level2 class 
    $(this).find('li ul li').addClass('level2'); 
    //step 2: mark 1st tier li's with level1 class 
    $(this).find('li').not('.level2').addClass('level1'); 

    var li_list = $(this).find('li'); 
    var list_size = li_list.size(); 
    //find which elements to split on and number of times 
    var split_points = (list_size/max_height) | 0; //bitwise OR is faster than Math.floor 
    var split_point = max_height - 1; 
    for (var i = 0; i < split_points; i++) { 

    split_list(li_list.eq(split_point), li_list.eq(split_point + 1)); 
    split_point += max_height; 

    } 
}); 

函數「split_list以」兩個連續的李的（但不一定是嵌套在同一UL）和通過注入對和

分開並將它們拆分。

function split_list(li_obj, next_li_obj) { 
    if (li_obj.length == 0 || next_li_obj.length == 0) { 
    return false; 
    } 
    if (li_obj.attr('class') == 'level2' && next_li_obj.attr('class') == 'level2') { 

    li_obj.append('</ul></ul>'); 
    next_li_obj.prepend('<ul><ul>'); 
    } else { 
    li_obj.append('</ul>'); 
    next_li_obj.prepend('<ul>'); 
    } 


} 

我認爲這應該工作，因爲它關閉列表

然後開始在正確的地方一個新的。但似乎jQuery「追加」和「前置」不允許我添加未封閉的標籤。它爲我關閉了它們。

有沒有辦法強制jQuery插入我想要的確切字符串？或者有更好的方法來做到這一點？

Answer 1

只需構建一個HTML字符串，然後在最後附加/前綴它。這不僅可以讓你在必要時通過未封閉的標籤一塊一塊地構建它，它也是更好的性能（不是你會注意到的！）。

Answer 2

這裏很好解釋Can I use Jquery to insert a closing </tr> tag and an opening <tr> tag inside a dynamic table? 我認爲你應該嘗試重建你的結構，也許使用分離或創建新的UL，並放在那裏拆分LI的。