おせわになります。プログラマ初心者です。

当方、現在職業訓練校に通っているのですが、javascriptでプログラム作れるようになりたくても、答えていただけるような状況になく、
恥ずかしながら、こちらに質問をさせていただきます。

javascriptで、配列を用いて、順番に「#1」「#2」「#3」「#4」「#5」「#6」
と表示するプログラムを作りたいと考えています。
(「#」は、HTMLで指定しているidで利用するため、必須です。)

下記のように書いたのですが、思うように順番に値を取得することができません。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var test = [['#1','#2','#3'], ['#4','#5','$6']];
for(var i=0; i<2; i++){
for(var j= 0; j<3; j++){
x = test[i][j];

$(function(){
alert(x);
});
}
}
</script>
どのようにしたら、配列の中の値を順番に取得して表示できるようになるでしょうか?

私のような素人でも「わかりやすい回答」を頂けた方には、先着で100ptを進呈したいと思います。
どうぞ、よろしくお願いいたします。

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2014/12/25 18:09:19
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:monfortino

>ぽけっとしすてむさま。 ご質問ありがとうございます。。

下記、正しいかどうかわかりませんが、php的な書き方をしますと、

連想配列を利用して、

$list[] = array('a' => '#1',

'b' => '#2',

'c' => '#3',

);

$list[] = array('a' => '#4',

'b' => '#5',

'c' => '#6',

);

for ($i = 0; $i < count($list); $i++) {

echo $list[$i]["a"];

echo $list[$i]["b"];

echo $list[$i]["c"];

}

のように、整理して書きたいと考えました。

こちらで、イメージはつたわりますでしょうか?

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

ポイント100pt

順番には動いてます。表示の仕方が間違っているだけです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var test = [['#1','#2','#3'], ['#4','#5','#6']];
for(var i=0; i<2; i++){
    for(var j= 0; j<3; j++){
        x = test[i][j];

//      $(function(){   jQuery 関数の使い方が間違ってます
//          alert(x);
//      });

        alert(x);   // 確認するだけなら、単に alert() を呼び出せば良いです。
    }
}
</script>

でも、これだと jQuery を使っている意味がないし、もしかしたら「表示」って、こういうことをやりたいんでしょうか。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
    var test = [['#1','#2','#3'], ['#4','#5','#6']];
    for(var i=0; i<2; i++){
        for(var j= 0; j<3; j++){
            x = test[i][j];

            $('#target').append($('<DIV></DIV>',{id: x}).text(x));
        }
    }
});
</script>
<style>
#target {
    border: solid 1px blue;
}
</style>
<div id="target"></div>




追記です。
補足に書かれた php のコードにちょっと近いイメージで書き直しました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
    var test = [
                    {a:'#1',b:'#2',c:'#3'},
                    {a:'#4',b:'#5',c:'#6'},
                ];
    for(var i=0; i<2; i++){
        for(var j in test[i]) {
            x = test[i][j];

            $('#target').append($('<DIV></DIV>',{id: x}).text(x));
        }
    }
});
</script>
<style>
#target {
    border: solid 1px blue;
}
</style>
<div id="target"></div>

jsFiddle で、試してみたのがこちらです。
http://jsfiddle.net/e2t430xt/

動かすと

<div id="target"></div>

というところが、以下のようになります。

<div id="target">
<div id="#1">#1</div>
<div id="#2">#2</div>
<div id="#3">#3</div>
<div id="#4">#4</div>
<div id="#5">#5</div>
<div id="#6">#6</div>
</div>

# 改行は入りませんけど。

id:a-kuma3

おっと、補足が...

2014/12/25 17:18:10
id:monfortino

ありがとうございます。
「php のコードにちょっと近いイメージ」、どんぴしゃでした。
とても、助かりました。

2014/12/25 18:12:42

その他の回答1件)

id:monfortino

質問文を編集しました。詳細はこちら

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント100pt

順番には動いてます。表示の仕方が間違っているだけです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var test = [['#1','#2','#3'], ['#4','#5','#6']];
for(var i=0; i<2; i++){
    for(var j= 0; j<3; j++){
        x = test[i][j];

//      $(function(){   jQuery 関数の使い方が間違ってます
//          alert(x);
//      });

        alert(x);   // 確認するだけなら、単に alert() を呼び出せば良いです。
    }
}
</script>

でも、これだと jQuery を使っている意味がないし、もしかしたら「表示」って、こういうことをやりたいんでしょうか。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
    var test = [['#1','#2','#3'], ['#4','#5','#6']];
    for(var i=0; i<2; i++){
        for(var j= 0; j<3; j++){
            x = test[i][j];

            $('#target').append($('<DIV></DIV>',{id: x}).text(x));
        }
    }
});
</script>
<style>
#target {
    border: solid 1px blue;
}
</style>
<div id="target"></div>




追記です。
補足に書かれた php のコードにちょっと近いイメージで書き直しました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
    var test = [
                    {a:'#1',b:'#2',c:'#3'},
                    {a:'#4',b:'#5',c:'#6'},
                ];
    for(var i=0; i<2; i++){
        for(var j in test[i]) {
            x = test[i][j];

            $('#target').append($('<DIV></DIV>',{id: x}).text(x));
        }
    }
});
</script>
<style>
#target {
    border: solid 1px blue;
}
</style>
<div id="target"></div>

jsFiddle で、試してみたのがこちらです。
http://jsfiddle.net/e2t430xt/

動かすと

<div id="target"></div>

というところが、以下のようになります。

<div id="target">
<div id="#1">#1</div>
<div id="#2">#2</div>
<div id="#3">#3</div>
<div id="#4">#4</div>
<div id="#5">#5</div>
<div id="#6">#6</div>
</div>

# 改行は入りませんけど。

id:a-kuma3

おっと、補足が...

2014/12/25 17:18:10
id:monfortino

ありがとうございます。
「php のコードにちょっと近いイメージ」、どんぴしゃでした。
とても、助かりました。

2014/12/25 18:12:42
id:Lhankor_Mhy No.2

回答回数814ベストアンサー獲得回数232

 こんにちは。
 正解?だけ書くならこうです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var test = [['#1','#2','#3'], ['#4','#5','$6']];
for(var i=0; i<2; i++){
  for(var j= 0; j<3; j++){
    x = test[i][j];

    alert(x);
  }
}
</script>

 
 解説が必要なら追記しますのでご連絡ください。

id:Lhankor_Mhy

あら、補足拝読。a-kuma3さんが回答してるからもういいかな。

2014/12/25 17:30:21
id:a-kuma3

ここから先が長いような予感も :-)

2014/12/25 18:01:28
  • id:psne
    書き直してしまうと、例えばこうなってしまいますが、
    var test = ['#1','#2','#3','#4','#5','#6']
    for(var i=0; i<6;i++){
    alert(test[i]);
    }

    どのような書き方をして下さい という問題なのか指定がある場合は追記をすると回答が得られやすくなります。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません