Javascript 是否可以显示/隐藏包装在不同div中的li元素？

我正在使一个无响应的站点响应。对于移动视图，我试图在着陆时显示3个li元素，单击“显示更多”再加载3次，以此类推。点击显示少和3李项目应删除

我正在处理一个包含更多li项目的项目，但我想知道我遇到的问题是否是范围问题？如果有办法解决的话

我正在处理的项目有一个可滚动的div，在一个div中显示li项，并隐藏其余项，直到用户单击箭头为止。（这就是为什么我没有重写我前任网站的代码的原因，我的原版网站就是为了说明我的意思）

这里有解决办法吗

我已经在一把小提琴中重新创建了我的问题（简化）

编辑：为了进一步澄清，如小提琴所示，着陆时显示的所有li元素不应该是这种情况。显示较少也会删除3个以上的项目

<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="red"></div></li>
            <li><div class="red"></div></li>
            <li><div class="red"></div></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="blue"></div></li>
            <li><div class="blue"></div></li>
            <li><div class="blue"></div></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="green"></div></li>
            <li><div class="green"></div></li>
            <li><div class="green"></div></li>
        </ul>
    </div>
</div>



<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

$(document).ready(function () {
$('.thumbnails li:lt(3)').show();
$('#showLess').hide();
var items =  9;
var shown =  3;
$('#loadMore').click(function () {
    $('#showLess').show();
    shown = $('.thumbnails li:visible').size()+3;
    if(shown< items) {$('.thumbnails li:lt('+shown+')').show();}
    else {$('.thumbnails li:lt('+items+')').show();
         $('#loadMore').hide();
         }
});
$('#showLess').click(function () {
    $('.thumbnails li').not(':lt(3)').hide();
});
});

加载更多
少展示
$（文档）.ready（函数（）{
$（'.thumbnails li:lt（3）'）.show（）；
$（'#showLess'）.hide（）；
风险值项目=9；
var=3；
$（“#加载更多”）。单击（函数（）{
$（'#showLess'）.show（）；
显示=$（'.thumbnails li:visible'）.size（）+3；
if（show

不确定这是否是您的目标，但这至少起到了一些作用：

var totalCount;   //Keeps track of the total number of li's, shown or hidden.
var currentCount; //Keeps track of the number of li's currently shown.

$(document).ready(function () {
    //Count how many li's there are in total.
    totalCount  = $('.thumbnails li').size();
    //Start by showing three of them.
    currentCount = 3;
    adjustLiShown();
    $('#loadMore').click(function () {
       //Increase by three and update.
       currentCount += 3;
       adjustLiShown()
    });
    $('#showLess').click(function () {
       //Decrease by three and update.
       currentCount -= 3;
       adjustLiShown()
    });
});

function adjustLiShown() {
    //Hide all and then show the one with index under total count.
    $('.thumbnails li').hide().filter(':lt(' + currentCount + ')').show();
    //Only show "load more" if we haven't reached the total yet.
    $('#loadMore').toggle(currentCount < totalCount);
    //Only show "show less" if we are above the starting number.
    $('#showLess').toggle(currentCount > 3);
}

var总计数//跟踪显示或隐藏的li的总数。
无功电流计数//跟踪当前显示的li的数量。
$（文档）.ready（函数（）{
//数一数总共有多少李。
totalCount=$（'.thumbnails li'）.size（）；
//首先展示其中三个。
电流计数=3；
adjustLiShown（）；
$（“#加载更多”）。单击（函数（）{
//增加三个并更新。
电流计数+=3；
调整
});
$（“#无显示”）。单击（函数（）{
//减少三个并更新。
currentCount-=3；
调整
});
});
函数adjustLiShown（）{
//隐藏全部，然后显示索引位于“总计数”下的一个。
$（'.thumbnails li'）.hide（）.filter（':lt（'+currentCount+'））.show（）；
//如果我们还没有达到总数，只显示“加载更多”。
$（'#loadMore'）。切换（currentCount3）；
}

.

尝试使用

.slice（）

$（文档）.ready（函数（）{
$（'.thumbnails li:lt（3）'）.show（）；
//隐藏大于3的“缩略图”
$（'.thumbnails li:gt（2）'）.hide（）；
$（'#showLess'）.hide（）；
风险值项目=9；
var=3；
$（“#加载更多”）。单击（函数（e）{
$（'#showLess'）.show（）；
$（“.thumbnails li:不（：可见）”）.slice（0,3）
.show（函数（）{
if（$（“.thumbnails li:visible”）.length==项）{
$（e.target）.hide（）
}
})
});
$（“#无显示”）。单击（函数（e）{
$（'.thumbnails li:visible'）.slice（-3）.hide（function（）{
if（$（“.thumbnails li:visible”）.length==0）{
$（e.target）.hide（）
};                
if（$（'.thumbnails li:visible'）。长度<项）{
$（“#加载更多”）.show（）
}
});
});
});

jshiddle

试试这个

$(document).ready(function () {

  $('.row').hide();
  $('.row:eq(0)').show();

  var totalElements = $(".thumbnails li").length;
  var elementsInEachRow = 3;

  $('#loadMore').click(function () {  

    var lastVisibleElement = $(".thumbnails li").index($(".thumbnails li:visible").last()) + 1;
    var indexOfRowToHide = (lastVisibleElement / 3);

    $(".row:eq("+indexOfRowToHide+")").show();
    $('#showLess').show();

  });

  $('#showLess').click(function () {

    var lastVisibleElement = $(".thumbnails li").index($(".thumbnails li:visible").last()) + 1;
    var indexOfRowToHide = (lastVisibleElement / 3) - 1;

    $(".row:eq("+indexOfRowToHide+")").hide();
    $('#loadMore').show();

  });
});

---

Pen：

我不确定我是否理解您的问题所在。第一段对我来说很有意义。我不知道为什么另一个是相关的，或者它意味着什么？也许我只是太慢了……嗨@Anders，我给出的上下文是，我正在处理的实际代码库有更多的li元素。因为javascript不起作用，而且我认为我写的是正确的，我想知道我遇到的问题是否是因为li项被分成了3个不同的div，而不是一个div。最后，我要解释的原因，3 div是为可滚动插件通过桌面。如果你去原始站点，你可以看到它。这就是我的前任是如何建立这个网站的，我是否需要完全重写才能使它正常工作？希望我的回答更合理这是一个很好的答案，有没有一种方法可以实现一个移动媒体查询？我不需要为平板电脑和桌面视图提供隐藏/显示功能。很高兴这有帮助。例如，签出。如果您需要更多关于如何检测移动设备的具体帮助，我建议您提出一个新问题。再次感谢，我正在寻找类似的解决方案。

$(document).ready(function () {

  $('.row').hide();
  $('.row:eq(0)').show();

  var totalElements = $(".thumbnails li").length;
  var elementsInEachRow = 3;

  $('#loadMore').click(function () {  

    var lastVisibleElement = $(".thumbnails li").index($(".thumbnails li:visible").last()) + 1;
    var indexOfRowToHide = (lastVisibleElement / 3);

    $(".row:eq("+indexOfRowToHide+")").show();
    $('#showLess').show();

  });

  $('#showLess').click(function () {

    var lastVisibleElement = $(".thumbnails li").index($(".thumbnails li:visible").last()) + 1;
    var indexOfRowToHide = (lastVisibleElement / 3) - 1;

    $(".row:eq("+indexOfRowToHide+")").hide();
    $('#loadMore').show();

  });
});