「もっと見る」ボタンを作りたい

Question

もっと見るボタンを実装したいです。

<div class="mottolist">
    <div class="hogehoge">
        <div class="fugafuga">
            <div>その1</div>
        </div>
    </div>
    <div class="hogehoge none">
        <div class="fugafuga">
            <div>その2</div>
        </div>
    </div>
~~~~~
    <div class="hogehoge none">
        <div class="fugafuga">
            <div>その50</div>
        </div>
    </div>
</div>
<a class="motto" href="javascript:void(0);">もっと</a>

このようなhtmlがあったとして、初期表示は1つ。
(それ以外はCSSで非表示にしておく)

もっと見るボタンを押すと、n個(5とか10とか)ずつ追加して、
m個(100とか200とか)まで表示するようなJavascriptを実装したいです。

どなたかご教示お願い致します。

Answer 1

  var now = 1;
  var max = $('.hogehoge').length;
  $('.motto').click(function() {
    now += 5;
    if (now > max) now = max;
    $('.hogehoge:lt(' + now + ')').show();
  });

初期表示数は1行目の1、追加する数は4行目の5です。

Comments

[退会済みユーザー]

ありがとうございます、思い描いたとおりに動きました。

Answer 2

初期表示は1つ。 (それ以外はCSSで非表示にしておく)

と言うことは 最初にすべてのデータを読み込んで置くという事ですよね？
ページ閲覧時のサーバー負荷を軽減できないという点で あまり意味がないと思います。
もしもphp等を併用して扱えるのであればこちらのページがお役にたてると思います。
ページ下部にスクロールするとコンテンツを読み込む

Comments

[退会済みユーザー]

phpとテンプレートエンジンを使って一度に読み込み、
すべてhtmlに埋め込んでいるので、Ajaxは使わない方向でお願いします。