是否可以顯示/隱藏包裝在不同div中的li元素？

Question

我正在對無響應的網站作出響應。對於移動視圖，我試圖在着陸時顯示3 li元素，單擊「顯示更多」另一個3負載等等。點擊顯示較少，3個li項目應該被刪除。

我正在處理一個項目有很多李項目，但想知道我遇到的問題是範圍問題？如果有辦法解決它。

我正在處理的項目的特色是一個可滾動的div，在一個div中顯示li項目，並隱藏其餘部分直到用戶點擊一個箭頭。 （這就是爲什麼我沒有重寫我的前任原代碼的代碼是爲了說明我的意思http://www.asla.org/sustainablelandscapes/index.html）

這裏有解決方案嗎？

我重做了我的問題（簡體）在小提琴 http://jsfiddle.net/gward90/xgmdkpb8/

編輯：爲了進一步澄清，與小提琴的所有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(); 
}); 
}); 

Answer 1

不知道這是你的目標是什麼，但是這至少做一些事情：

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

Fiddle。

Answer 2

嘗試利用.slice()

$(document).ready(function() { 
    $('.thumbnails li:lt(3)').show(); 
    // hide `.thumbnails` greater than 3 
    $('.thumbnails li:gt(2)').hide(); 
    $('#showLess').hide(); 
    var items = 9; 
    var shown = 3; 
    $('#loadMore').click(function (e) { 
     $('#showLess').show(); 
     $(".thumbnails li:not(:visible)").slice(0, 3) 
     .show(function() { 
      if ($(".thumbnails li:visible").length === items) { 
      $(e.target).hide() 
      } 
     }) 
    }); 
    $('#showLess').click(function (e) { 
     $('.thumbnails li:visible').slice(-3).hide(function() { 
      if ($(".thumbnails li:visible").length === 0) { 
      $(e.target).hide() 
      };     
      if ($('.thumbnails li:visible').length < items) { 
      $("#loadMore").show() 
      } 
     }); 
    }); 
}); 

的jsfiddle http://jsfiddle.net/xgmdkpb8/6/

Answer 3

試試這個，

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

    }); 
}); 

筆：http://codepen.io/vbrmnd/pen/ZbWEYW