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

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 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;
}

小提琴的例子