jquery - 対応するインデックス（jQuery）を使用して配列アイテムをDOM要素に追加します

Question

divsHTMLに3つあるとしましょう

<div>
    <h2>This is div 1</h2>
</div>
<div>
    <h2>This is div 2</h2>
</div>
<div>
    <h2>This is div 3</h2>
</div>

また、3つのネストされた配列で構成されるJavaScript配列があります。

var array = [ 
    [ "<p>Bla bla</p>", "<p>Other stuff</p>"], 
    [ "<p>Another paragraph</p>"], 
    [ "<p>Yet another</p>", "<p>yes</p>", "<p>yes</p>" ] 
    ];

この配列には、の数と同じように、常に3つのメンバーが含まれると確信していdivsます。

私がやりたいのは、メイン配列のネストされた各配列のコンテンツを、対応する番号でdivに追加することです。

何かのようなもの：

for ( var i = 0; i < array.length; i++ ) {
    $('div').eq( i ).append( array[i] );
}

上記のコードは機能しませんが、私の意図は明らかだと思います。

ここで実用的な例を見つけることができます=> http://jsfiddle.net/G8BsK/

ありがとう。

Answer 1

Change this...

.append( array[i] );

to this...

.append( array[i].join('') );

Although I would highly recommend taking the DOM selection out of the loop, and caching it.

var divs = $('div');
for ( var i = 0; i < array.length; i++ ) {
    divs.eq( i ).append( array[i].join('') );
}

...or just do this...

$('div').append(function(i) {
    return array[i].join('');
});

Answer 2

やったほうがいい

var array = [
    ["<p>Bla bla</p>", "<p>Other stuff</p>"],
    ["<p>Another paragraph</p>"],
    ["<p>Yet another</p>", "<p>yes</p>", "<p>yes</p>"]
    ];

for (var i = 0; i < array.length; i++) {
    var arr = array[i];
    for (var m = 0; m < arr.length; m++) {
        $('div').eq(i).append(arr[m]);
    };
}

http://jsfiddle.net/G8BsK/2/

Answer 3

これは、追加される配列値が html 文字列ではなく、配列自体であるためです。あなたはそれらに参加する必要があります。

    for ( var i = 0; i < array.length; i++ ) {
        $('div').eq( i ).append( array[i].join('') );
    }

動作します。唯一の違いは 'array[i].join('') です