javascript - 如何通过 jQuery 对 html 元素进行分页

Question

我有这样的 html 元素:

<div class="content">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
</div>

我想使用 jQuery 对这些元素进行分页，在脚本中我可以修改每页的元素数量，例如: num_per_page = 4 然后第 1 页将显示 box 1 到 box 4，第 2 页将显示 box 5 到 框 8。

Answer 1

尝试使用 .slice()

var num_per_page = 4;
//then page 1 will show box 1 to box 4 
// note, `.slice()` uses a 0-based index, 
// element at index `3` would be fourth from 0
$(".content .box").slice(0, num_per_page -1).show()
// and page 2 will show box 5 to box 8.
.end().slice(num_per_page).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="content">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
</div>