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);
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
iを初期化する箇所が間違っています。
jのループごとにiのループを回さなければならないのだから
jのループの中にiの初期化が無ければ、iが一度5までいったら
二度とiのループの中に入ることはありません。
普通ならこのような場合for文を使いますよ。
for文を使えばこんなバグは作りにくいと思います。
余談ですが「x = x, y = y;」は意味がわかりません。全く不要です。
No.1
- 回答日時:
こんにちは。
どうもインデックスの制御がうまくいっていないように思えます。
while文の前で、alertなどで各インデックスや制御用の変数値を確認してみるのがよろしいでしょう。
(5,5)だと多いので、(3,3)ぐらいのほうが良いかもしれません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオン自動開閉メニュ...
-
JQuery UIで、表示したタブの中...
-
チェックボックスに入っている...
-
jQueryアコーディオンで複数メ...
-
javascriptで教えてください。 ...
-
【JavaScript】階層関係から要...
-
複数のラジオボタン項目でのテ...
-
JQueryタブのアクティブ アン...
-
JQueryで、liタグの背景に色を...
-
jquery 3の倍数のliだけ色を変える
-
タブ切り替えの初期表示について
-
クリックした<a>タグのみにClas...
-
MAX関数を使ってからLEFT JOIN...
-
CSS のみのタブ切り替えについて
-
jQueryで同じクラス名のものを...
-
createElementで作成した要素を...
-
jQueryでのドラッグアンドドロ...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
スクロール可能なチェックボックス
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryのeqで最後からn番目以降...
-
jQueryで、リンクURLの一致を確...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
文字と数字が混在する要素のsor...
-
onmouseoverの表示切り替えが上...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
-
どの<li><a> が押されたか判別...
おすすめ情報