jquery - 使用 Jquery 截断列表

Question

如何添加隐藏/显示列表中元素的功能？

例如，我们有几个列表。当我们点击“显示”链接时，所有列表项都会显示出来，当我们点击“隐藏”链接时，隐藏索引大于3的列表项。

<div class="filter_item">
...
<h3>Network Name:</h3>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
...
</div>

和js代码

<script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function($){
            $('.filter_item ul').each(function(){
                $('li:gt(2)', this).hide();
                if ($(this, 'li').children().length > 3) {
                    $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>');
                }
            });
            $('.tr_more').toggle(function(){
                $(this).closest('li').siblings().show();
                $(this).attr('class', 'tr_less').text("Less...");
            }, function(){
                ????
            });
        });
    //]]>
</script>

点击“隐藏”链接时如何实现隐藏项目？

Answer 1

虽然这看起来过于复杂，但这对您有用:

$(this).closest('ul').children('li:gt(2):not(:last)').hide();

首先它搜索父项 <ul> ，然后隐藏子 <li> s，但保留“显示/隐藏”链接的父级。

与$(this).closest('li').prevAll().slice(2).hide();一起去效果不太好 - 它隐藏了第一个节点，而不是最后一个。 prevAll似乎以相反的顺序返回元素。