多次元配列がさっぱりです。

質問

var img = ["test01.jpg", "test02.jpg", "test03.jpg", "test04.jpg"];
var name = ["テスト1", "テスト2", "テスト3", "テスト4"];

for (var i = 0; i < img.length; i ++) {
document.write('<img src="../img/' + (img[i]) + '" width="132" height="160" border="0" />' + '<br />');
for (var j = 0; j < name.length; j ++){
document.write((name[j]));
}
}

全然駄目です・・・
画像があって、画像の下に　var name　を表示したいんですが、分かりませんでした。分かるかた、教えてください！

回答No.2

Hoge_Moge · ベストアンサー

多次元配列の意味でしょうか？
ご質問の内容と使っていうと２次元配列の作り方で迷っていると考え回答してみます。

２次元配列は、エクセルのシートにデータがあると考えれば解ります。

var myArray = [
[ "test01.jpg", "テスト1" ],
[ "test02.jpg", "テスト2" ],
[ "test03.jpg", "テスト3" ],
[ "test04.jpg", "テスト4" ]
];

上の代入式で、横方向に見るのを "行" とします。
例）[ "test01.jpg", "テスト1" ]

さらに縦方向に見るのを "列" とします。
例）"test01.jpg", "test02.jpg", ...

ここで、上記配列のそれぞれの要素にピンポイントでアクセスするためには、
myArray[行][列] と云うふうに考えて、インデックス（数字）を振ります。

ご存知の通り、配列のインデックスは 0 から始まりますので、"test01.jpg" を取得するためには、
0行目の0列目にアクセスと考えます。

だから、myArray[0][0] で "test01.jpg" を参照していることになります。
当然、"テスト1" なら、0行目の1列目なので、myArray[0][1] です。

イテレータ（forなどのループ処理）を使った処理をするならば、行をループさせる内側に列を処理するループを用意すると云う方法を用います。
つまり、forのネスト（入れ子）と云うわけです。

for ( var GYO = 0; GYO < myArray.length; GYO++ ) { // 行ループ
for ( var RETSU = 0; RETSU < myArray[GYO].length; RETSU++ ){
alert( myArray[GYO][RETSU] ); // 順番に "test01.jpg", "テスト1" などと表示される
}
}

外側のforの myArray.length は行を数えています。
内側のforの myArray[GYO].length はその行に含まれる列（項目数ともいえる）を数えています。

この考え方は、３次元以上の多次元配列でも同様です。
次元が増える毎に入れ子の数が増えると言えます。

なお、ご質問の内容は各行の項目数が同じなので、無理に入れ子にしなくても大丈夫です。

for ( var GYO = 0; GYO < myArray.length; GYO++ ) { // 行ループ
myArray[GYO][0]; // ソースファイル名です
　　　myArray[GYO][1]; // 画像の下に表示する文字列です
}

という感じです。

頑張ってください。

お礼

ありがとうございます！

まだまだ配列の勉強が足りないと痛感しました。
とても参考になりました！ありがとうございます

回答No.1

yambejp

全然多次元じゃないですけど・・・

for (var i = 0; i < img.length; i ++) {
document.write('<img src="../img/' + (img[i]) + '" width="132" height="160" border="0" />' + '<br />');
document.write(name[i]);
}

的な処理でいいんじゃないの？
構造をいじっていいなら多次元配列つかってみてください

<script>
var imgs=[
{"img":"test01.jpg","name":"テスト1"},
{"img":"test02.jpg","name":"テスト2"},
{"img":"test03.jpg","name":"テスト3"},
{"img":"test04.jpg","name":"テスト4"}
];
for (var i=0;i<imgs.length;i++) {
document.write('<img src="../img/'+ (imgs[i].img)+'" width="132" height="160" border="0" />'+'<br />'+imgs[i].name+'<br />');
}
</script>

なお、ちゃんとやるならDOMで処理する

お礼

すみません、おっしゃる通りでした。

もっと勉強して出直します

ありがとうございました