JQuery: Переместить последние элементы из UL в новый UL

Question

Я пытаюсь создать следующий в JQuery:

У меня есть список элементов (например, 10). Если количество элементов больше 6, скопируйте оставшиеся предметы (от 6 до 10) в новый UL, чтобы создать структуру выпадающего меню.

Первая версия меню будет http://jsfiddle.net/ryb7T/, где у меня есть 10 предметов.

Результат с jQuery должен выглядеть следующим образом: http://jsfiddle.net/hRaWt/, где отображаются 1-6 элементов, а остальные элементы, подменю, в новый UL.

Answer 1

Смотрите этот JQuery код:

 
if ($("#main-ul li").length > 6) { 
    // Too many li 
    $("#main-ul") 
     .append(
      $('<li>') 
      .append('more') 
      .append($('<ul>').append($("#main-ul li").slice(5).detach())) 
      ); 
} 

И жить here.

Answer 2

Вы должны проверить, если у вас есть более 6 элементов и переместить его в подменю, который скрыт по умолчанию

$(function() { 
    var $menuItems = $('#menu > li:visible'); 
    if ($menuItems.length > 6) 
    { 
     $('#menu > li:gt(5):not(#submenu)').appendTo('#submenu ul'); 
     $('#submenu').css('display', 'inline'); 
    } 
}); 
​ 

Код: http://jsfiddle.net/hRaWt/1/