javascript - 显示更多按钮以在javascript或jquery中作为分页工作

我在第一个站点上遇到的问题似乎很简单，也很普遍，通常发布在互联网上，被称为“显示更多”文本。但是我真正想要的是完全不同的。
首先，我有带有嵌套元素而不是纯文本的html元素。其次，我不想一次知道所有其余的隐藏元素，但要以3个元素或4个元素左右的块为单位
考虑以下示例

<div class = "outer" >

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>
  ------above elements to show by default when page loads------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------这三个点击“显示更多”-

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------这三个再次点击“显示更多”-

  and so on until all the elements are not finished.

</div>

现在这也很平易近人，但是如果我们必须在多个层面上做到这一点，该怎么办呢？表示我们将div与外部div如下移动

<div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>

最佳答案

这是适合您情况的可行解决方案：
http://jsfiddle.net/4C3AM/

var itemsCount = 0,
itemsMax = $('.outer div').length;
$('.outer div').hide();

function showNextItems() {
    var pagination = 3;

    for (var i = itemsCount; i < (itemsCount + pagination); i++) {
        $('.outer div:eq(' + i + ')').show();
    }

    itemsCount += pagination;

    if (itemsCount > itemsMax) {
        $('#showMore').hide();
    }
};

showNextItems();

$('#showMore').on('click', function (e) {
    e.preventDefault();
    showNextItems();
});

关于javascript - 显示更多按钮以在javascript或jquery中作为分页工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21576337/