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

您可以使用类而不是ID和包装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/

jQuery为多个ul列表加载前3个元素

1 个答案: