0

我正在使用 HTML5 + javascript 来开发网页。我有一个包含 100 个值的数组。我有 10 个不同的 HTML5“div”组件。我将第一个 10 数组值添加到第一个“div”中，将第二个 10 数组值添加到第二个“div”中，并且类似地继续。我正在使用 HTML DOM 将这些数组值添加到特定的“div”组件中。在这里，我使用了“if...elseif”条件并且工作正常。

但我被要求不要使用“if”条件将数组值添加到不同的“div”元素中。有没有其他可能的方法来做到这一点？

我的 div 组件是 'div1','div2'.......'div10'（添加在 body 标签中）

var myArray = ['user1', 'user2', 'user3', ..., 'user100'];

for(i=0;i<myArray.length;i++)
{
var a = document.createTextNode(myArray[i]);
    if(i<=10)
    {
    var container1 = document.getElementById('div1');
    container1.appendChild(a);
    }
    elseif(i>10 && i<=20)
   {
   var container2 = document.getElementById('div2');
   container2.appendChild(a);
   }
   ...
   ...
   ...
   ...
   else
   {
   var container10 = document.getElementById('div10');
   container10.appendChild(a);
   }
}
4

5 回答 5

1

这是不好的解决方案。更好的是以下：

for(j=0;j<10;j++)
{
//get div1, div2, div3 etc.
var container = document.getElementById('div'+(j+1));
for(i=0;i<10;i++)
{
//get proper value
var a = document.createTextNode(myArray[i+j*10]);

//insert value into container
container.appendChild(a);
}
}
于 2013-07-29T10:23:12.943 回答
1 
var myArray = ['user1','user2','user3',...'user100'];
for(var i = 0; i < 10; i++) {
    var container = document.getElementById("div" + (i + 1));
    for(var j = 0; j < 10; j++) {
        container.appendChild(document.createTextNode(myArray[(i * 10) + j]));
    }
}
于 2013-07-29T10:26:33.977 回答
1 
 var set=myArray.length/10; /** no of sets of 10 **/

 for(i=0;i<set;i++){ //loop through sets

   for(int j=(i*10);j<(i+1)*10;j++){ //loop through each set 0-9, 10-19

     var a  = document.createTextNode(myArray[j]);      
     document.getElementById('div'+(i+1)).appendChild(a);

   }
}
于 2013-07-29T10:28:48.667 回答
1

如果您不介意将数组值作为一个文本节点插入到每个 div 中，您可以这样做：

var div, i;

for (i = 1; i < 11; ++i) {
    div = document.getElementById('div' + i);

    div.innerHTML = myArray.splice(0, 10).join(' ');
}
于 2013-07-30T19:49:45.003 回答
0

您不需要 2 个 for 循环。你？

for (var i = 1; i <= 100; i++)
{
  document.getElementById('div' + ( i%10 + 1)) //this will give your target div
}

PS：饶了我吧……手机打字……

于 2013-07-29T10:25:59.913 回答