如何将3组数组中的值放入javascript中的差异div中

Question

假设我有 3 个 div。我有 3 组数组。我需要将每个数组中的值放入这 3 个 div 中。不知道怎么办？

让我们看看我的示例 div。

<div id='001'><div id="nr001"><div id="clr001"></div></div></div>
<div id='002'><div id="nr002"><div id="clr002"></div></div></div>
<div id='003'><div id="nr003"><div id="clr003"></div></div></div>

我有 3 组这样的数组（也许我有更多，但现在让我们以 3 组为例）：

**These array are from JSON.parse();**

[["001", "002", "003"],["8", "9", "20"], [ "brown", "black", "yellow"]]

我想做的事： 我想将数组中的这些值放入正确的 id div 中，它必须是这样的：

<div id='001'>8<div id="nr001"><div id="clr001">brown</div></div></div>
<div id='002'>9<div id="nr002"><div id="clr002">black</div></div></div>
<div id='003'>20<div id="nr003"><div id="clr003">yellow</div></div></div>

我试过的是：

var str = xmlHttp.responseText;
var res = JSON.parse(str);

var set1 = res[0], set2 = res[1], set3 = res[3];
for (var i = 0; i < set1.length; i++) {
    var div1 =  document.getElementById("nr"+set1[i]);
    var div2 =  document.getElementById("clr"+set1[i]);
    if (div1) {
        div1.innerHTML = set2[i];     
    }

  if (div2) {
        div2.innerHTML = set3[i];     

    }
}

我只有 div2，但没有 div1。我想我需要更多的脚本行。或新方法：S

获得解决方案后更新：

我要感谢所有给我解决方案的人。每个人都是正确的，这是我的错，我没有解释我使用 setTimeout() 每 15 秒调用一次函数的所有细节。那么其他答案是附加元素吗？当另一个调用完成时，结果追加到旧结果+++++

但是在我分配跨度而不是同时使用 div 之后。所以问题就没有了。我收到了我想要的消息。谢谢大家。

Answer 1

由于您的 div 是嵌套的，您不能简单地分配外部 div 的 innerHTML - 这会破坏其内容。您需要一个额外的标签才能将文本放入：

<div id='001'><span id="xyz001"></span><div id="nr001"><div id="clr001"></div></div></div>

var span =  document.getElementById("xyz"+set1[i]);
var div2 =  document.getElementById("clr"+set1[i]);
if (span) {
    span.innerHTML = set2[i];     
}

if (div2) {
    div2.innerHTML = set3[i];     
}

Answer 2

刚刚修改了 Omer Hassan 的答案。您必须使用其 innerHTML 将数据附加到主 div，然后将数据附加到内部 div，例如：

var res = [["001", "002", "003"],["8", "9", "20"], [ "brown", "black", "yellow"]];

for (var i = res[0].length - 1; i > -1; i--)
{
    var suffix = res[0][i];
    var div1 =  document.getElementById("nr" + suffix);


    div1.innerHTML = res[1][i] + div1.innerHTML;   

    var div2 =  document.getElementById("clr" + suffix);
    div2.innerHTML = res[2][i];
}

DEMO FIDDLE

Answer 3

var res = [["001", "002", "003"], ["8", "9", "20"], [ "brown", "black", "yellow"]];

for (var i = res[0].length - 1; i > -1; i--)
{
    var suffix = res[0][i];
    var container = document.getElementById(suffix);
    var div1 = document.getElementById("nr" + suffix);
    var div2 = document.getElementById("clr" + suffix);

    container.insertBefore(document.createTextNode(res[1][i]), div1);
    div2.innerHTML = res[2][i];
}

Answer 4

这样的事情怎么样：

var data = [["001", "002", "003"],["8", "9", "20"], ["brown", "black", "yellow"]];

for ( var i = 0; i < data[0].length; i++ ) {
    var div1 = document.getElementById(data[0][i]);
    div1.innerHTML = data[1][i] + div1.innerHTML;
    document.getElementById('clr' + data[0][i]).innerHTML = data[2][i];  
}

顺便说一句，我假设第一个数组是IDs，所以我只是循环遍历它们。这就是你看到data[0].length的原因。

再次直播@@JSFiddle 和here。