"Загрузить больше" для UL элементы списка

Question

У меня есть неупорядоченный список:

<ul id="cont-new"> 
    <li>text 1</li> 
    <li>text 2</li> 
    <li>text 3</li> 
    <li>text 4</li> 
    <li>text 5</li> 
    <li>text 6</li> 
    <li>text 7</li> 
    <li>text 8</li> 
    <li>text 9</li> 
    <li>text 10</li> 
    <li>text 11</li> 
    <li>text 12</li> 
    <li>text 13</li> 
    <li>text 14</li> 
    <li>text 15</li> 
</ul> 

<a href="#" class="load-more">Load more</a> 

Javascript

size_li = $("#cont-new li").size(); 

x_first = 8; 

$('#cont-new li:lt('+x_first+')').show(); 


$(".load-more").click(function(e) 
{ 
     x_first = (x_first+8 <= size_li) ? x_first+8 : size_li; 

     $('#cont-new li:lt('+x_first+')').show(); 

     return false; 
}); 

Я хочу:

1. На странице загрузки - показать первые 8 пунктов ;
2. На странице scroll - показать следующие 8 элементов/4 и показать ссылку "Загрузить еще";
3. На «Загрузить больше» нажмите - отобразите сразу 4 элемента, следующие 4 элемента показывают на странице прокрутки и покажите «Загрузить больше»;
4. Повторите шаг №3
5. Если все предметы загружены, спрячьте ссылку «Загрузить еще».

Как я могу это достичь?

Я создал следующий jsfiddle: https://jsfiddle.net/rhsa0qyv/

Answer 1

Используя обработчик событий .scroll, вы можете прикрепить свой код внутри события и зарегистрировать, когда пользователь достигнет дна, и прикрепите еще один, который скрывает кнопку.

$(window).scroll(function() { 
    if($(window).scrollTop() == $(document).height() - $(window).height()) { 
     x_first = (x_first+8 <= size_li) ? x_first+8 : size_li; 
      $('#cont-new li:lt('+x_first+')').show(); 
    } 
}); 

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     $(".load-more").hide(); 
    } 
}); 

Внесены изменения здесь:

https://jsfiddle.net/bjv6jvwo/1/

Документация:

https://api.jquery.com/scroll/

Answer 2

Может быть это одна поможет Сначала нужно добавить элемент к вашему ID Анчар теге экс <a href="#" id="LoadMore" class="load-more">Load more</a> после выполнения теперь обновить JQuery, используя этот код

size_li = $("#cont-new li").size(); 

x_first = 8; 

$('#cont-new li:lt('+x_first+')').show(); 


$(".load-more").click(function(e) 
{ 
     x_first = (x_first+8 <= size_li) ? x_first+8 : size_li; 

     $('#cont-new li:lt('+x_first+')').show(); 
    if(x_first==size_li){$('#LoadMore').hide();} 
     return false; 
}); 

Теперь вы получите результат.