如何使用 Jquery 截断长的无序列表？答案

【问题标题】：How do I truncate a long unordered list with Jquery?如何使用 Jquery 截断长的无序列表？
【发布时间】：2011-12-16 22:28:47
【问题描述】：

我正在使用 wordpress 显示按字母顺序排序的类别列表。我想使用 jQuery 在前 20 个链接之后附加一个“阅读更多”链接。当用户单击“阅读更多”时，其余类别会向下滑动/出现。列表的 HTML 格式如下：

<ul id="catA">
    <h2>Categories</h2>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    ...
</ul>

我希望将<a href="#">view all categories</a> 附加到 20rh 类别之后的列表中，然后隐藏所有内容。在我尝试编写一些代码之前，有什么想法可以解决这个问题吗？

【问题讨论】：

标签： jquery truncate html-lists

【解决方案1】：

我会使用:eq() selector 找到第 20 个 li 元素（注意它是零索引），在其后添加您的查看全部链接，然后使用 :gt() selector 选择并隐藏你多余的 li 元素。您需要将一个事件处理程序附加到您的查看全部链接，以显示隐藏的 li 并自行删除。

【讨论】：

不知道 gt 选择器。谢谢！

【解决方案2】：

我会这样做：

$('ul#catA').children('li').each(function (i)
{
    if (i > 19)
    {
        $(this).hide();   
    }
});

var more = $('<li class="cat-item"><a href="">Show More</a></li>');
$('ul#catA').append(more);

more.find('a').on('click', function (){
   $(this).parent().siblings('li').show();

   return false; 
});

这是jsfiddle，展示了我的方法。

我根据@nachito 关于使用:gt() 选择器的建议创建了一个更新的jsfiddle。我还添加了一些 cmets 来解释正在发生的事情。

// creating the new 'Show More' link
var more = $('<li class="cat-item"><a href="">Show More</a></li>');

// hiding all lis after the first two
$('ul#catA').children('li:gt(1)').hide();

// adding the 'Show More' link
$('ul#catA').append(more);

// binding a click event to 'Show More'
more.find('a').on('click', function (){        
   // hiding 'Show More' and showing the rest of the lis in this ul 
   $(this).parent().hide().siblings('li').show();

   // preventing default action and event bubbling
   return false; 
});

【讨论】：

很好的方法，有时我希望我能选择两个好的答案。谢谢！

【解决方案3】：

这是最简单的解决方案，但可能有效：

让“查看全部”链接在列表之后创建，并给它一个像“#catA-viewall”这样的ID；
隐藏所有项目；
仅显示前 20 个；

点击“查看全部”后，我们会显示所有元素。

var $items = $('#catA').children();
if ( $items.length > 20 ) {
    $items.hide().slice(0, 20).show();
    $('#catA-viewall').click(function () {
        $items.fadeIn(); // or .show()
        $(this).remove();
    });
} else {
    $('#catA-viewall').remove();
}

【讨论】：