jQueryで要素を回数指定して繰り返し表示する

要素を連続して大量に列べる場合、全部htmlでマークアップしていては大変です。
今回は「画像を100個表示させる」を例に、デモページを作成しました。

画像を含んだリストを100まで繰り返して生成する

ファイル名が連番で 1.jpg、2.jpg……100.jpg までの画像があるとします。
（デモページでは10種類の画像を100個用意しているので同じ画像が複数回登場しているように見えますが、本来は全て違う画像ということでお願いします。。）
この画像を1つずつ表示するように、jQueryで以下のタグを繰り返すように指定します。
100ある画像を一度に読み込むと表示に時間がかかってしまうのでlazy loadというプラグインを使用して画面に入った時に画像を表示させるようにしているため、srcにはダミー画像を指定し、data-originalに表示したい画像のパスを指定しています。
Xの部分には1～100までの連番が入ると想定してください。

<li>
  <img class="lazy" src="images/X.jpg" data-original="images/1.jpg" alt="1" style="display: inline;">
  <p class="caption">1</p>
</li>

html

htmlファイルの中にループさせたい要素の親要素を作成します。
jQueryで指定するためのid名を付与してください。

<ul id="loop-list"></ul>

jQuery

jQueryライブラリと、lazy load のプラグインを読み込みます。
lazy load配布元

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../lazyload/jquery.lazyload.min.js"></script>

for文でiという変数に1を代入して1ずつ増やしていき、iが100になるまで繰り返します。ファイル名、alt、キャプションに連番と同様の数字を挿入するため、+i+で変数に代入された数字が表示されるようにしています。

$(function(){
	for (var i = 1; i <= 100; i++){
		$('#loop-list').append('<li><img class="lazy" src="../lazyload/dummy.gif" data-original="images/'+i+'.jpg" alt="'+i+'" /><p class="caption">'+i+'</p></li>');
	}
});
$(window).load(function () {
	$('.lazy').lazyload({
		effect: 'fadeIn',
		effectspeed: 1000
	});
});