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

Example fiddle

删除列表项并将它们添加到无序列表中

3 个答案: