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

这个问题很久以前就被提出了，在这里也得到了回答，但这只针对一个

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

$（文档）.ready（函数（）{
size#li=$（“#myList li”）.size（）；
x=3；
$（'#myList li:lt（'+x+'））.show（）；
$（“#加载更多”）。单击（函数（）{
x=（x+5您可以通过使用类而不是id和包装div来更改代码；而不是通过使用元素嵌套来相应地更改逻辑

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

代码：

$（文档）.ready（函数（）{
$（“.wrapper”）。每个（函数（索引）{
$（this.find（'.myList li:lt（'+$（this.attr（'viewChild'）+'）））.show（）；
});   
$（'.loadMore'）。单击（函数（）{
var$myWrapper=$（this）.closest（'.wrapper'）；
var x=parseInt（$myWrapper.attr（'viewChild'），10）；
var liSize=$myWrapper.find（'.myList li'）.size（）；
x=（x+5，你的
#loadMore
和
#showLess
链接在哪里？好的，我会把它添加到主帖子中。谢谢你的提问。我想每个列表都有一个
loadMore
链接？这是正确的，但如果需要的话，我可以更改它以使事情顺利进行……你有一个
loadMore/showLess
的
链接吗一个控制所有
s的
loadMore/showLess
大Thanks@Irvin多米尼·阿卡·爱德华。你的努力让我大吃一惊。对你提供的巨大帮助，仅仅说一句感谢是不够的。祝你一切顺利！
<div id="loadMore">Load more</div><div id="showLess">show Less</div>

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

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