JavaScript多重ループを使ったHTML生成

JavaScriptで以下のようなHTMLを生成したいと考えています。

<li>を任意の数で繰り返し処理して生成し、
さらにそれを任意の数で繰り返し処理して生成した<ul>に
紐づけるようにしたいと考えています。

<div id="index">

<ul>
　　<li><div></div></li>
　　<li><div></div></li>
　　<li><div></div></li>
　　↓
　　<li>任意の数で繰り返し
</ul>
<ul>
　　<li><div></div></li>
　　<li><div></div></li>
　　<li><div></div></li>
　　↓
　　<li>任意の数で繰り返し
</ul>
↓
<ul>任意の数で繰り返し

</div>

以下のようなスクリプトをjQueryを使って書いてみましたが、うまくできませんでした。
アドバイスいただけると大変助かります。
よろしくお願いいたします。

(function(x, y) {
　　var i = 0, j = 0, x = x, y = y;
　　var index = $("#index");

　　　　while(j < y) {
　　　　　　var ul = $("<ul>");
　　　　　　ul.appendTo(index);

　　　　　　while(i < x) {
　　　　　　　　var li = $("<li>");
　　　　　　　　var div = $("<div>");
　　　　　　　　div.appendTo(li);
　　　　　　　　li.appendTo(ul);
　　　　　　　　i++;
　　　　　　}

　　　　j++;
　　　　}

})(5, 5);

No.1 回答者： fujillin 回答日時： 2013/04/16 07:04

こんにちは。

どうもインデックスの制御がうまくいっていないように思えます。

while文の前で、alertなどで各インデックスや制御用の変数値を確認してみるのがよろしいでしょう。
（5,5）だと多いので、（3,3）ぐらいのほうが良いかもしれません。

No.2 回答者： pringlez 回答日時： 2013/04/16 09:09

iを初期化する箇所が間違っています。

jのループごとにiのループを回さなければならないのだから
jのループの中にiの初期化が無ければ、iが一度5までいったら
二度とiのループの中に入ることはありません。

普通ならこのような場合for文を使いますよ。
for文を使えばこんなバグは作りにくいと思います。

余談ですが「x = x, y = y;」は意味がわかりません。全く不要です。