2012-05-02 93 views
1

比方说我有三个divs在我的HTML追加数组项与相应的索引(jQuery的)DOM元素

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

另外,我有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>" ] 
    ]; 

我相信这个数组总是有三个成员,就像divs的数字一样。

我想要做的是将主数组的每个嵌套数组的内容添加到具有相应编号的div。

喜欢的东西:

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

上面的代码不工作,但我想我的意图很明显。

你可以在这里找到工作的例子=>http://jsfiddle.net/G8BsK/

感谢。

回答

5

改变了...

.append(array[i]); 

这个...

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

虽然我会强烈建议您采取DOM选择退出循环,并缓存它。

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

...或者只是这样做......

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

是的,谢谢,它是这样工作的。我忘了加入他们。 :)顺便说一句,在我的实际代码中我有dom元素缓存。 – Maverick

0

你应该做

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/

0

这是因为被追加数组的值是数组本身,不是html字符串。你必须加入他们。

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

将工作。唯一的区别是'array [i] .join('')