将数组项附加到具有相应索引的 DOM 元素（jQuery）

Posted 2023-03-11

【中文标题】将数组项附加到具有相应索引的 DOM 元素（jQuery）

【英文标题】：Append array item to DOM element with corresponding index (jQuery)

【发布时间】：2012-05-12 04:01:04

【问题描述】：

假设我的 html 中有三个 divs

<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/

谢谢。

【参考方案1】：

这是因为附加的数组值是数组本身，而不是 html 字符串。你必须加入他们。

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

会起作用。唯一的区别是 'array[i].join('')

【参考方案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/

【参考方案3】：

改变这个...

.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('');
);

【讨论】：

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