メモ：jQueryでforを使う

2008/06/20

カテゴリ：: jQuery

タグ：: メモ; jquery; javascript; 繰り返し

jQueryでforを使う時のメモ

JavaScriptのサンプルを見ながら、
jQueryでforを使った繰り返しをしてみよう！
なんて思って作り始めたんだけど、うまくいかない

JavaScriptも勉強しないとなーなんて思いつつ、全然してない。

とりあえずメモしておく。

まずは普通のJavaScript

サンプルとして、かけ算を作ってみた。

for (i = 1; i <= 9; i++){
    for(j = 1; j <= 9; j++){
        document.write(i +"×"+ j +"="+i*j+"
");
    };
};

あとはこれをjQueryを使った場合、どんな記述にするか。

指定位置に表示させようとしてみる

こんな感じにしてみた

$(function(){
    for (i = 1; i <= 9; i++){
        for(j = 1; j <= 9; j++){
           $("div.preview.samp01").html(i +"×"+ j +"="+i*j+"
");
        };
    };
});

■プレビュー１

サンプル

あれ？繰り返さない・・・
どうやら最後だけが表示されてしまっている。

この作りだと、リピート終わってからの代入になるってことですね。

作り直してみよう。ついでにリスト表示にしてみよう。

作り直してみた

$(function(){
    for (i = 1; i <= 9; i++){
        for(j = 1; j <= 9; j++){
            hoge2 += ""+i +"×"+ j +"="+i*j+"";
        };
    };
    $("div.preview.samp02 ul").html(hoge2);
});

hoge2という変数に、どんどんリピートしたのが継ぎ足されるようにしてみた。

そんな上記のスクリプトにしてみたところ・・・
あれれ？？？今度は一切表示されなくなった。。。
エラーみたいなので、プレビューは各自にてしてみてください。

ここで変数hogeを初期化してみる。

さらに作り直してみた

$(function(){
    var hoge3 = "";
    for (i = 1; i <= 9; i++){
        for(j = 1; j <= 9; j++){
            hoge3 += ""+i +"×"+ j +"="+i*j+"";
        };
    };
    $("div.preview.samp03 ul").html(hoge3);
});