javascript - jQuery 加载多个 ul 列表的前 3 个元素

Question

这个问题很久以前就被问过，也在这里得到了解答jQuery load first 3 elements, click “load more” to display next 5 elements ，但这仅适用于一个 ul 元素。

但是，我想知道如何对多个元素做同样的事情，比如我有这个:

<ul id="myList"></ul>
<ul id="myList1"></ul>
<ul id="myList2"></ul>

在这种情况下如何为多个元素制作 JavaScript？

$(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();
        }
    });
});  

知道该怎么做吗？

谢谢

更新#1:

这是我的 showmore 和 showless 的其他代码部分

<div id="loadMore">Load more</div><div id="showLess">show Less</div>

更新#2

如果使用类而不是 id，会不会更容易？像这样:

    <ul class="myList"></ul>
    <ul class="myList"></ul>
    <ul class="myList"></ul>

每个showmore/Less可以控制其中一个。所以一对一...这可能吗？？？

Answer 1

您可以通过使用类而不是 ids 和包装 div 来更改代码；而不是通过使用元素嵌套来相应地改变逻辑。

您可以使用 HTML 属性来存储每个 ul 当前显示的 li 数量，而不是使用变量。

代码:

$(document).ready(function () {

    $(".wrapper").each(function (index) {
        $(this).find('.myList li:lt(' + $(this).attr('viewChild') + ')').show();
    });   

    $('.loadMore').click(function () {
        var $myWrapper= $(this).closest('.wrapper');
        var x= parseInt($myWrapper.attr('viewChild'),10);
        var liSize=$myWrapper.find('.myList li').size();        
        x = (x + 5 <= liSize) ? x + 5 : liSize;
        $myWrapper.attr('viewChild',x)
        $myWrapper.find('.myList li:lt(' + x + ')').show();
        $myWrapper.find('.showLess').show();
        if (x == liSize) {
            $myWrapper.find('.loadMore').hide();
        }
    });

    $('.showLess').click(function () {
        var $myWrapper= $(this).closest('.wrapper');
        var x= $myWrapper.attr('viewChild')
        x = (x - 5 < 0) ? 3 : x - 5;
        $myWrapper.attr('viewChild',x)
        $myWrapper.find('.myList li').not(':lt(' + x + ')').hide();
        $myWrapper.find('.loadMore').show();
        $myWrapper.find('.showLess').show();
        if (x == 3) {
            $myWrapper.find('.showLess').hide();
        }
    });
});

演示:http://jsfiddle.net/9gxBT/