如何通過jQuery的

Question

分頁HTML元素我有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到box 8。

Answer 1

你可以做，

var noOfBoxesPerPage = 3; 
var totalPages = Math.ceil($(".content .box").length/noOfBoxesPerPage); 
$(".content .box").hide(); 
$(".content .box:lt(" + noOfBoxesPerPage + ")").show(); 
for (i = 1; i <= totalPages; i++) { 
    $("#page").append("<span>" + i + "</span>"); 
} 
$("#page").on("click", "span", function() { 
    $(".content .box").show(); 
    var ltCount = ($(this).index()) * noOfBoxesPerPage; 
    var gtCount = ($(this).index() + 1) * noOfBoxesPerPage; 
    $(".content .box:lt(" + ltCount + ")").hide(); 
    $(".content .box:gt(" + (gtCount - 1) + ")").hide(); 
}); 

Fiddle demo

這將創建的頁面以及頁面索引

Answer 2

嘗試使用.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>