THE HAM MEDIA BLOG

メモ:jQueryでforを使う

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
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+"
"); }; }; });

■プレビュー1

サンプル

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

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

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

作り直してみた

$(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); });

    ■プレビュー3

    • サンプル

    あ、できた!!
    変数の初期化というか宣言が必要だったのですね。

    メモ

    ●今回理解したこと

    • ◎ リピートした物は、とりあえず変数につけたしで入れておく。
    • ◎ 最後にまとめて表示する。
    • ◎ 利用する変数はforが始まる前に宣言しておく。

    こんなところだろうか。

    それと、こんな感じにもできるのでは?という考え。

    ●今後のためのメモ

    • ◎ リピートした物はを変数で足して行くのじゃなくて、配列に入れて行く。
    • ◎ 配列に入れたのをを一つづつ取り出す。それをリピートで表示させる。

    うーん、自分でもできるか謎(笑)



    この記事へのコメント
    コメントを書く
    お名前: [必須入力]

    メールアドレス: [必須入力]

    ホームページアドレス:

    コメント: [必須入力]

    認証コード: [必須入力]


    ※画像の中の文字を半角で入力してください。

    この記事へのトラックバック

    トップに戻る

    ×

    この広告は180日以上新しい記事の投稿がないブログに表示されております。