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

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("..");

看到这个小提琴

Answer 3

尝试这个：

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

小提琴

请注意，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
        }
    });

});