иллюзия пагинации с помощью jQuery

Question

эй, я хочу создать базовый эффект пагинации ... у меня есть (скажем, 100) постов.я хочу показать первые 9, поэтому спрятаться от 10 до 100, как мне забрать этих детей.

Моя следующая просьба иметь в виду, очевидно, спрятать 1-9 показать 10-18 спрятать 19-100Вы поняли идею.Спасибо заранее.

разметка в соответствии с:

<div class="grid">
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
etc...
</div>

Answer 1

Чтобы скрыть все, кроме первых девяти, вы можете использовать селектор :gt:

$(".grid .widget:gt(8)").hide();

Вы можете использовать комбинацию :gt и :lt селекторов для достижения вашей цели.

Другой способ, который я бы предложил, это использовать slice в соответствии с ответом @ tvanfosson.(+1) * +1014 *

Answer 2

Вы можете использовать функцию slice , чтобы ограничить выбор диапазоном.Обратите внимание, что он начинается с нуля.

$('.widget').hide().slice(9,17).show();

Answer 3

Вот некоторый код.Очевидно, вы захотите установить page и затем выполнять код each() всякий раз, когда пользователь изменяет страницу.

var ITEMS_PER_PAGE = 2;
var page = 1;

// Option 1
$('.grid > .widget').each(function(i, item) {
    var visible = i >= (ITEMS_PER_PAGE * (page - 1)) && i < (ITEMS_PER_PAGE * page);
    $(item).toggle(visible);
});

// Option 2 (based on other answers)
$('.grid > .widget').hide().slice((ITEMS_PER_PAGE * (page - 1)), (ITEMS_PER_PAGE * page)).show();