如何隐藏列表中的元素并添加"显示更多"功能？

Question

我正在使用javascript来构建结果列表.我有一个for循环迭代一些数据并创建一个mydata div,并将其添加到结果div.让我们假装它看起来像这样:

<div id="results">
    <div class="mydata">data 1</div>
    <div class="mydata">data 2</div>
    ...
    <div class="mydata">data 20</div>
</div>

我想要做的只是一次只显示5个结果,如果用户希望看到更多,他们可以点击下一个节目5或显示更多按钮(或类似的东西).有任何想法吗？

只是为了澄清,每当用户点击"显示更多"时,我想"取消隐藏"接下来的5个元素,而不是所有剩余的元素.因此,每次单击都会显示更多元素,直到显示完

Answer 1

你可以在这里使用gt()和lt()选择器:visible.

以下将显示关于点击的下5个结果,并在所有项目可见后删除链接.

$('.mydata:gt(4)').hide().last().after(
    $('<a />').attr('href','#').text('Show more').click(function(){
        var a = this;
        $('.mydata:not(:visible):lt(5)').fadeIn(function(){
         if ($('.mydata:not(:visible)').length == 0) $(a).remove();   
        }); return false;
    })
);

工作实例:http://jsfiddle.net/niklasvh/nTv7D/

无论其他人在这里建议什么,我都不会使用CSS隐藏元素,而是在JS中执行,因为如果用户禁用了JS并且您使用CSS隐藏了元素,则他不会将它们显示出来.但是,如果他禁用了JS,它们将永远不会被隐藏,也不会出现该按钮等等,因此它有一个完整的noscript后备+搜索引擎不喜欢隐藏的内容(但是如果你不知道它们隐藏了在DOM负载上做).