私は順不同のリストを持っています:
<ul id="myList"></ul>
<div id="loadMore">Load more</div>
このリストに別の HTML ファイルのリスト アイテムを追加したい:
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
最初の 3 つのリスト項目を読み込み、ユーザーが「もっと読み込む」div をクリックしたときに次の 5 つの項目を表示したい:
$(document).ready(function () {
// Load the first 3 list items from another HTML file
//$('#myList').load('externalList.html li:lt(3)');
$('#myList li:lt(3)').show();
$('#loadMore').click(function () {
$('#myList li:lt(10)').show();
});
$('#showLess').click(function () {
$('#myList li').not(':lt(3)').hide();
});
});
「さらに読み込む」で次の 5 つのリスト項目を表示したいのですが、HTML ファイル内にさらにリスト項目がある場合は、「さらに読み込む」div を再度表示して、ユーザーが次の項目を表示できるようにするために、助けが必要です。 5 項目、リスト全体が表示されるまでこれを繰り返します。
どうすればこれを達成できますか?
次の jsfiddle を作成しました: http://jsfiddle.net/nFd7C/