删除列表项并将其添加到和无序列表中

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> 

我尝试了以下方法，但我不知道如何将切片的列表项添加到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变量获取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