刪除列表項，並將其添加到和無序列表

Question

我與鏈接的下面量的工作並不總是相同

<ul> 
    <li>link 1</li> 
    <li>link 2</li> 
    <li>link 3</li> 
    <li>link 4</li> 
    <li>link 5</li> 
    <li>link 6</li> 
    <li>link 7</li> 
    <li>link 8</li> 
</ul> 

現在，當我有超過5個環節我需要刪除所有的項目超過5個鏈接，並把它們添加到一個無序列表

所以我需要得到以下

<ul> 
    <li>link 1</li> 
    <li>link 2</li> 
    <li>link 3</li> 
    <li>link 4</li> 
    <li>link 5</li> 
    <li>more+</li> 
    <ul> 
     <li>link 6</li> 
     <li>link 7</li> 
     <li>link 8</li> 
    </ul> 
</ul> 

我嘗試以下只有我的DIT不知道如何切片列表項添加到var

$('li').slice(5).remove(); 
$("ul").append("<li>More +</li> <ul><li>link 6</li></ul>"); 

Answer 1

你可以這樣做：

var slicer=$('li').size()-5; 
var removedItems=$('li').slice("-"+slicer); 
$("ul").append("<li>More +<ul id='moreItems'></ul></li>"); 
$("#moreItems").append(removedItems); 

slicer var獲取ul的超出元素，removedItems採用從切片器變量開始的jQuery元素。

比你可以將它們追加到新列表。

演示：http://jsfiddle.net/IrvinDominin/UqqJJ/

Answer 2

不要刪除切片，否則會將它從dom中刪除。首先如你所做的那樣進行切片選擇並將其分配給一個變量，然後將該變量追加到UL。然後你可以從DOM中刪除任何你想要的東西。

var myItemsGreaterThan5 = $('li').slice(5); 
$("ul").append("<li>More +</li>" + myItemsGreaterThan5); 
myItemsGreaterThan5.remove(); 

Answer 3

試試這個：

var $additionalLi = $('li').slice(5).remove(); 
if ($additionalLi.length) { 
    $('<li />', { 'class': 'expand' }).text('More +') 
     .append($additionalLi.wrap('<ul></ul>').parent()) 
     .appendTo('ul'); 
} 

$('ul').on('click', 'li.expand', function() { 
    $('ul', this).toggle(); 
}); 

您還需要來設置兒童ul元素開始隱藏：

ul ul { 
    display: none; 
} 

Example fiddle