一次显示10个jquery对象

我有一个网站，将容纳100个对象，这些对象如下所示：

 function Products (type, title, description, cost, image){
 this.type = type;
 this.title = title;
 this.description = description;
 this.cost = cost;
 this.image = image;
 this.displayInfo = function(){
  var info ="<div class='p-image'>";
      info += this.image + "</div><div class='p-title'>";
      info += this.title + "</div><div class='p-cost'>";
      info += "Online Product Cost: $" + this.cost + "</div><div class='p-desc'>";
      info += "<strong>DESCRIPTION:</strong> " + this.description + "</div>";

     return info;
 }
 }


 // define an array to store products
 var product_list = [];

 var im = "<img src='http://ecx.images-amazon.com/images/I/911wQX4ahaL._SL1500_.jpg' id = 'image'>";
 var desc = "<br><span style = 'font-weight: bold; padding-top: 10px;'>Developer: </span>Teyon<br> <span style = 'font-weight: bold;'>Platforms: </span>PS3, WIN, X360<br> <span style = 'font-weight: bold;'>Release Date: </span>2013</br><span id = 'para'> Sequel to Heavy Fire: Afghanistan, in which soldiers are sent after a captured spy who holds the plans to a secret Iranian nuclear weapons facility.</span>";
 var product = new Products('v fps win xbone ps3','Heavy Fire: Shattered Spear',desc, 10.00, im);
product_list.push(product);

var im = "<img src='http://upload.wikimedia.org/wikipedia/en/c/c5/AliensColonialMarinesBox.png' id = 'image'>";
var desc = "<br><span style = 'font-weight: bold;'>Developer: </span>Gearbox Software<br> <span style = 'font-weight: bold;'>Platforms: </span>PS3, WIN, X360<br> <span style = 'font-weight: bold;'>Release Date: </span>2013</br><span id = 'para'>True sequel to James Cameron's film, the story of Aliens: Colonial Marines takes place nearly 17 weeks after the events of Alien 3 and almost 199 years prior to the events of Alien Resurrection, as the cryotubes containing Ellen Ripley, Corporal Hicks, Newt, and the android Bishop had ejected from the Sulaco. </span>";
product_list.push(new Products('v fps','Aliens: Colonial Marines',desc, 10.00, im));  

displayProducts();

function displayProducts() {

    for (var i=0; i<product_list.length; i++){
    //product_list[i].type can determine which are chosen
        var divrow = "<div class='list "+ product_list[i].type + "' data-index='" +i+ "' >";
        divrow +=  product_list[i].displayInfo() + "</div>"
    $('#main-list').append(divrow);
    //tried append to '#list' and '.list' but didn't work either so made main-list div
    }
 }

当它们显示时，一旦页面加载，它们将同时全部显示。所以我的页面高度是巨大的。我希望列表从100个下降到每次只显示10个。与谷歌展示其网站的方式类似：

我从来没有做过这个。显示版本之前，所以我想知道如何做到这一点。我只是希望它们在页面上动态更新，因为我在同一页面上也有一个购物车表。有什么想法或建议吗

到目前为止，我的网站如下所示：

让你开始吧。下面是它的相关代码：

HTML:

Javascript:

//set a variable to track the number of pages
var pageCount = 0;

function displayProducts() {
    //create a container 'page'
    var page = $('<div class="page"/>');

    //parse your data array
    for (var i = 0; i < product_list.length; i++) {
        //create the item div
        var divrow = "<div class='list " + product_list[i].type + "' data-index='" + i + "' >";
        divrow += product_list[i].displayInfo + "</div>"
        //append it to the 'page
        page.append(divrow);

        //if we reach 10 items (or the end of the list), add the 'page' to the doc, and reset the page variable
        if ((i + 1) % 10 == 0 || i == product_list.length-1) {
            //add page
            $('#main-list').append(page);
            //increase page count
            pageCount++;
            //reset the page variable to a new blank 'page' div
            page = $('<div class="page hidden"/>');
        }
    }

    //simple pager anchor elements
    for (var j = 0; j < pageCount; j++) {
        //using data-page attribute to refer to the 0 based index
        $('#pager').append('<a href="#" data-page="' + j + '">' + (j + 1) + '</a>&nbsp;');
    }
}
//hide all pages then show the one that equals the 'data-page' index
$('#pager').on('click', 'a', function (e) {
    $('.page').addClass('hidden').eq($(this).attr('data-page')).removeClass('hidden');
});

嗯

---

-Ted

快速搜索会产生结果。有一个更简单的。我正在寻找自己的程序。我以为你只需要一个。显示隐藏功能？我看到你的第二个链接。我会查一查，如果你想自己玩的话，你需要更类似于跳过和接受Linq的东西。

.hidden{
    display:none;
}

//set a variable to track the number of pages
var pageCount = 0;

function displayProducts() {
    //create a container 'page'
    var page = $('<div class="page"/>');

    //parse your data array
    for (var i = 0; i < product_list.length; i++) {
        //create the item div
        var divrow = "<div class='list " + product_list[i].type + "' data-index='" + i + "' >";
        divrow += product_list[i].displayInfo + "</div>"
        //append it to the 'page
        page.append(divrow);

        //if we reach 10 items (or the end of the list), add the 'page' to the doc, and reset the page variable
        if ((i + 1) % 10 == 0 || i == product_list.length-1) {
            //add page
            $('#main-list').append(page);
            //increase page count
            pageCount++;
            //reset the page variable to a new blank 'page' div
            page = $('<div class="page hidden"/>');
        }
    }

    //simple pager anchor elements
    for (var j = 0; j < pageCount; j++) {
        //using data-page attribute to refer to the 0 based index
        $('#pager').append('<a href="#" data-page="' + j + '">' + (j + 1) + '</a>&nbsp;');
    }
}
//hide all pages then show the one that equals the 'data-page' index
$('#pager').on('click', 'a', function (e) {
    $('.page').addClass('hidden').eq($(this).attr('data-page')).removeClass('hidden');
});