load more button mit ajax/jquery

Hallo zusammen.

Ich bin dabei mich in jquery einzuarbeiten möchte mir einen "load more" -button erstellen, der dynamisch Inhalte in div- containern via ajax aus einer html- datei in meine index.html lädt wenn man auf ihn klickt.

Also ich habe eine index.html mit den containern <div id="loadcontent"></div><div id="loadmore">Load more</div>  und ich habe eine content.html die in etwa so aussieht:

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>

Beim Aufrufen der Seite sollen die ersten drei divs in #loadcontent geladen werden. Das funktioniert mit $('#loadcontent').load('content.html .content:lt(3)');

Jetzt aber sollen beim Klick auf "load more" die nächsten drei divs, also 4, 5, und 6, nachgeladen werden, usw. Eigentlich ist es das gleiche wie in diesem Fiddle , bloß dass die divs hier nur aus- und eingeblendet werden...

Kann mir vielleicht jemand einen Tipp geben wie ich das ganze hinbekomme? Ich weiss nicht wie ich es schaffe, dass er die Inhalte zählt und weiss wie viel bereits geladen wurde und wie viel noch geladen werden kann, das ganze natürlich mit ajax load.

Für Hilfe wäre ich dankbar.

Zitat von Jav

Wenn ich nicht zufällig und unbeabsichtigt den Vorschautext zu deinem Beitrag gesehen hätte, hätte ich das völlig ignoriert wegen deines Nicks, der sowas von an Spam-Bots erinnert.

Keine Sorge, ich bin ein Mensch. Diesen Nick benutze ich seit Jahren, sodass ich ihn schon auswendig kann.

Jav leider verstehe ich deine frage nicht ganz.

beim aufruf der seite sollen automatisch 1 bis 3 geladen werden.

beim klick auf load more sollen 4-6 nachgeladen werden. (ingesamt sind jetzt 1 bis 6 zu sehen)

beim weiteren klick auf load more sollen 7-9 nachgeladen werden. (ingesamt sind jetzt 1 bis 9 zu sehen)

usw.

somit ließe sich deine frage mit "nein, ich brauche sie nicht bevor sie nachgeladen werden" beantworten.

Also, ich bin einen Schritt weiter.

var countItem = 0;

$('#more').click(function(){
    countItem ++;
    $('<div/>').appendTo('#loadcontent').load('content.html #' + countItem).hide().fadeIn(1000);
});

Allerdings ist es jetzt so, dass er die Elemente jeweils einzeln lädt.

Hat jemand vielleicht eine Idee wie ich das hinkriege, dass er jeweils beim Klick drei Elemente der Klasse ".content" reinlädt?