【问题标题】：jQuery load first 3 elements, click "load more" to display next 5 elementsjQuery 加载前 3 个元素，单击“加载更多”以显示后 5 个元素
【发布时间】：2013-07-19 01:38:20
【问题描述】：

我有一个无序列表：

<ul id="myList"></ul>
<div id="loadMore">Load more</div>

我希望用另一个 HTML 文件中的列表项填充此列表：

<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>

我想加载前 3 个列表项，然后在用户单击“加载更多”div 时显示接下来的 5 个项目：

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#loadMore').click(function () {
        $('#myList li:lt(10)').show();
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

我需要帮助，因为我希望“加载更多”显示接下来的 5 个列表项，但如果 HTML 文件中有更多列表项，则再次显示“加载更多”div 并允许用户显示接下来的 5 个项目，重复此操作直到显示整个列表。

我怎样才能最好地做到这一点？

我创建了以下 jsfiddle：http://jsfiddle.net/nFd7C/

【问题讨论】：

load() 将使用 $.get 加载整个文件，然后只在客户端进行过滤，因此您应该加载整个文件并自己进行过滤，而不是加载相同的内容超过
感谢 @adeneo 我刚刚进行了编辑，以显示接下来的 5 个列表项而不是加载。

标签： jquery load html-lists

【解决方案1】：

警告：size() 在 jQuery 1.8 中已弃用并在 jQuery 3.0 中删除，请改用 .length

工作演示：http://jsfiddle.net/cse_tushar/6FzSb/

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

新的 JS 显示或隐藏加载更多和显示更少

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

CSS

#showLess {
    color:red;
    cursor:pointer;
    display:none;
}

工作演示：http://jsfiddle.net/cse_tushar/6FzSb/2/

【讨论】：

太棒了@tushar-gupta，我将如何用我加载的列表来实现它？另外，显示整个列表后如何隐藏“加载更多”？
效果很好@tushar-gupta，但我如何首先使用这个脚本加载我的 externalList.html 文件？
在页面中包含外部html文件
这个脚本对大家很有帮助
@TusharGupta 我们可以将其用作子 div 与某些类 .abc 在最外层的 div 中，id 为 #mylist 请帮助我jsfiddle.net/nFd7C/1960

【解决方案2】：

简单且几乎没有变化。并且在加载整个列表时也隐藏更多。

jsFiddle here.

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#showLess').hide();
    var items =  25;
    var shown =  3;
    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = $('#myList li:visible').size()+5;
        if(shown< items) {$('#myList li:lt('+shown+')').show();}
        else {$('#myList li:lt('+items+')').show();
             $('#loadMore').hide();
             }
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

【讨论】：

我喜欢在没有更多显示时隐藏“显示更多”链接的功能。它看起来更整洁。
你的小提琴有问题，首先加载更多项目然后显示更少。然后加载更多是不可见的。我已经分叉了你的小提琴，这是工作中的一个：jsfiddle.net/santosh_patnala/nFd7C/422
嗨，我怎样才能让这个 JS 适应 3 个不同的块？ :-/ 我尝试添加不同的 ID，但没有运气。有什么建议么？ :)
我们能不能把它用作子 div，在最外层的 div 中使用某个类，id 为 #mylist 请帮助我jsfiddle.net/nFd7C/1960
@OptimusPrime 这是新的 js fiddle jsfiddle.net/nFd7C/1965 我想显示前三个图像，然后在单击加载更多后添加两个

【解决方案3】：

在 jQuery3 中不推荐使用表达式 $(document).ready(function()。

查看 jQuery 3 here

考虑到我没有包含无显示按钮。

代码如下：

$(function () {
    x=3;
    $('#myList li').slice(0, 3).show();
    $('#loadMore').on('click', function (e) {
        e.preventDefault();
        x = x+5;
        $('#myList li').slice(0, x).slideDown();
    });
});

CSS

#myList li{display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}

【讨论】：