Можно ли показать/скрыть элементы li, завернутые в разные div?

Question

Я делаю отзывчивый сайт отзывчивым. Для мобильного просмотра я пытаюсь показать 3 ли элемента при посадке, нажмите «показать больше» еще 3 загрузки и так далее. Хит показывается меньше, и 3 лица должны быть удалены.

Я работаю над проектом с большим количеством элементов li, но задавался вопросом, является ли проблема, с которой я сталкиваюсь, проблема с областью? И если есть способ исправить это.

Проект, в котором я работаю, содержит прокручиваемый div, отображающий элементы li в одном div и скрывающий остальные, пока пользователь не нажмет на стрелку. (вот почему я не переписал код с моего предшественника оригинального сайта, здесь, чтобы проиллюстрировать, что я имею в виду http://www.asla.org/sustainablelandscapes/index.html)

Есть ли решение здесь?

я воссоздал мою проблему (упрощенный) в скрипкой http://jsfiddle.net/gward90/xgmdkpb8/

EDIT: Для дальнейшего уточнения, как видно с скрипкой все литиево элементы показывают на посадку это не должно быть так. Показать меньше удаляет более трех элементов.

<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

Try используя .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(); 

    }); 
}); 

Pen: http://codepen.io/vbrmnd/pen/ZbWEYW