Question

我想实现以下目标：

如果给定的ul中有超过12个li，则将最后一个替换为“...”并隐藏在第12个之后出现的任何一个。

任何人都可以按我的方式提出一些指示吗？

Answer 1

的 LIVE DEMO

<ul data-truncate="12">

jQuery的：

$('[data-truncate]').each(function(){ var n = $(this).data('truncate') -1; $('li', this).eq( n ).nextAll().hide().last().after('<li>...</li>'); });

Answer 2

你可以简单地使用jQuery .slice()

$('ul').html($('ul li').slice(0,12)).append("..");

请参阅此fiddle

Answer 3

试试这个：

$('#myList > li:eq(11)').nextAll().hide().end().after('<li>...</li>');

FIDDLE

请注意，eq()方法中提供的索引是从零开始的，并且是指jQuery对象中元素的位置，而不是DOM树中的位置。因此，eq(11)表示此处的第12项。

Answer 4

这是工作小提琴： http://jsfiddle.net/acturbo/w3yep/7/

示例html：

<ul id="mylist">
    <li>1 </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5 last one to see</li>
    <li>6 will be truncated</li>
    <li>7 will be truncated</li>
    <li>8 will be truncated </li>
</ul>

jquery的：

$(document).ready(function () {
   var maxToShow = 5;

    $("#mylist li").each( function(i, e){
        // truncate all li elements after the 5th
        if ( i >= maxToShow){
            // $(e).remove(); // remove it
            $(e).hide(); // or hide it
        }
    });

});

如果超过一定数量，则截断列表中的li的数量

4 个答案: