Направляющая страницы на стороне пользователя

Question

У меня есть N количество элементов html. Можно ли скрыть нижние элементы N - 10 с помощью jQuery, а затем создать кнопку «Загрузить еще», чтобы показать еще 10 элементов?

Я имею в виду, что когда страница загружается, должны быть видны только 10 первых элементов, и когда я нажимаю «Загрузить больше», отображаются 20 первых элементов, и когда я нажимаю снова, отображаются 30 первых элементов, и т.д.

будет ли это быть что-то вроде

$('li').slice(-($('li').length - 10)).hide(); 

, а затем

var num_visible = 10; 
$('#loadMore').click(function() { 
    $('li').slice(num_visible, num_visible + 10).show(); 
    num_visible += 10; 
}); 

Answer 1

Вы, возможно, необходимо добавить некоторые дополнительные проверки - это просто показывает вообще я dea - для вашего конкретного случая использования, но что-то вроде этой работы?

var currShowing = 10; 
changeShowing() 
function changeShowing() { 
$('div').each(function(index, value) { 
    if (index < currShowing - 1) { 
     $(this).show(); 
    } else { 
     $(this).hide(); 
    } 
    }) 
} 

function showMore() { 
    currShowing += 10; 
    changeShowing(); 
} 

http://codepen.io/mwvanmeurs/pen/VPoORq