0

我正在使用以下链接的数量并不总是相同的

 <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>" );
4

3 回答 3

2

你可以这样做：

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

slicervar 获取 ul 的超出元素，并从removedItemsslicer 变量开始获取 jQuery 元素。

您可以将它们附加到新列表中。

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

于 2013-08-22T15:02:01.957 回答
1

不要删除切片，否则它会从 dom 中删除它。首先像您一样选择切片并将其分配给一个变量，然后将该变量附加到 UL。然后你可以从 DOM 中删除任何你想要的东西。

var myItemsGreaterThan5 = $('li').slice(5);
$( "ul" ).append( "<li>More +</li>" + myItemsGreaterThan5 );
myItemsGreaterThan5.remove();
于 2013-08-22T14:55:51.190 回答
1

试试这个：

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

示例小提琴

于 2013-08-22T15:01:51.030 回答