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のsortableで一部ソート...
-
【javascript で動的に a タグ...
-
クリックで表示、非表示するメ...
-
チェックボックスに入っている...
-
ホームページビルダー15 メニュ...
-
jquery ドロップダウンメニュー...
-
javascriptでEnterキーをtabキ...
-
jQueryのeqで最後からn番目以降...
-
JS <a></a>タグ内のリンク先ア...
-
多階層ドロップダウンのスマホ...
-
ネストされたチェックボックス...
-
JQueryタブのアクティブ アン...
-
MAX関数を使ってからLEFT JOIN...
-
【HTML、VBScript】HTAでのイベ...
-
1枚の画像をクリックして複数の...
-
error LNK2019 未解決のシンボ...
-
タブで開いてさらにタブ内をア...
-
jspでcssが読み込めない
-
javascriptでオブジェクトの重...
-
オンマウス時に別画像を上に重...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報