javascript - 如何在迭代时将数组项显示到不同的 div 中？

Question

在迭代数组时，我想将前两个数组项显示到第一个 DIV 中，然后将第二个数组项显示到第二个 Div 中，依此类推。我已经部分实现了我的结果，但我仍然认为这是不正确的。我如何实现这一点？

我想在每个 div 下显示以下数组项，如下所示:

第一个列表:铅笔，200橡胶，250第二个列表锐器，300钢笔，400

第三个列表油漆，500盒子, 50

<div class="container">
  <div class="best order1" id="one">
    <h1>First List</h1>

  </div>
  <div class="best order2" id="two">
    <h1>Second List </h1>

  </div>
  <div class="best order3" id="three">
    <h1>Third List</h1>

  </div>
  <input type="button" value="List" onclick="myArray();">

</div> 

下面是我的函数；

function myArray() {

  var arr1 = [];
  arr1 = [{
      "Item": "Pencil",
      "Quantity": 200
    },
    {
      "Item": "Rubber",
      "Quantity": 250
    },
    {
      "Item": "Sharpner",
      "Quantity": 300
    },
    {
      "Item": "Pen",
      "Quantity": 400
    },
    {
      "Item": "Paint",
      "Quantity": 500
    },
    {
      "Item": "Box",
      "Quantity": 50
    }
  ];

  var portion = arr1.length / 2;

  for (i = 0; i < arr1.length; i++) {
    //alert(arr1[i].Item+','+arr1[i].Quantity );
    if (i <= portion) {
      document.getElementById('one').innerHTML += arr1[i].Item + ',' + arr1[i].Quantity + '<br>';

    } else {
      document.getElementById('two').innerHTML += arr1[i].Item + ',' + arr1[i].Quantity + '<br>';

    }

  }

}

这是我的 Fiddle

Answer 1

一种可能的解决方案是添加另一个嵌套循环来控制项目的部分，这样您就不需要 if 检查:

for (i = 0; i < arr1.length; i++) {
  for (j = 0; j < portion; j++) {
    document.getElementById('wrapper-'+i).innerHTML += arr1[i*portion+j].Item + ',' + arr1[i*portion+j].Quantity + '<br>';
  }
}

我还添加了 id，例如 wrapper-[number]，以便更容易地从循环中访问 DOM 元素。

这里是 JsFiddle

和片段:

function myArray() {

  var arr1 = [];
  arr1 = [{
      "Item": "Pencil",
      "Quantity": 200
    },
    {
      "Item": "Rubber",
      "Quantity": 250
    },
    {
      "Item": "Sharpner",
      "Quantity": 300
    },
    {
      "Item": "Pen",
      "Quantity": 400
    },
    {
      "Item": "Paint",
      "Quantity": 500
    },
    {
      "Item": "Box",
      "Quantity": 50
    }
  ];

  var portion = 2;

  for (i = 0; i < arr1.length / portion; i++) {
    for (j = 0; j < portion; j++) {
      document.getElementById('wrapper-'+i).innerHTML += arr1[i*portion+j].Item + ',' + arr1[i*portion+j].Quantity + '<br>';
    }
  }

}

<div class="container">
  <div class="best order1" id="wrapper-0">
    <h1>First List</h1>

  </div>
  <div class="best order2" id="wrapper-1">
    <h1>Second List </h1>

  </div>
  <div class="best order3" id="wrapper-2">
    <h1>Third List</h1>

  </div>
  <input type="button" value="List" onclick="myArray();">
</div>