Question

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

我想在每个div下面显示以下数组项：

第一个清单： 铅笔，200 橡胶，250 第二个清单 Sharpner，300 笔，400

第三张清单 油漆，500 Box，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

和片段：

＆＃13;

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>';
    }
  }

}

＆＃13;

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

＆＃13;

Answer 2

你能做的是。声明部分数量。 portion是一个变量，用于决定要为其显示数据的部分数量。使它变得动态（将来如果你需要改变部分的数量，如果你有更多的偶数记录）。你可以用一个基本的数学在一个循环中完成所有这些。

第1步：按document.querySelectorAll(".best").forEach(e=> ids.push(e.getAttribute("id")) )

获取所有部分ID

Step2 ：按var portion = arr1.length / 4;

声明部分数量

Step3 ：循环播放数组并将数据追加为html

 var counter = -1;
arr1.map((e,i)=> {
     if(i%portion == 0)
     counter++;
      document.getElementById(ids[counter]).innerHTML += e.Item +","+e.Quantity+"</br>"

} )

这是片段

＆＃13;

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
    },
     {
      "Item": "ABC",
      "Quantity": 123
    },
    {
      "Item": "XYZ",
      "Quantity": 123
    }
  ];

  var portion = arr1.length / 4;
  var ids = [];
  document.querySelectorAll(".best").forEach(e=>   ids.push(e.getAttribute("id")) )
   var counter = -1;
    arr1.map((e,i)=> {
         if(i%portion == 0)
         counter++;
          document.getElementById(ids[counter]).innerHTML += e.Item +","+e.Quantity+"</br>"
    
    } )

 }

＆＃13;

<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>
  <div class="best order3" id="four">
    <h1>Forth List</h1>

  </div>
  <input type="button" value="List" onclick="myArray();">

</div>

＆＃13;

聚苯乙烯。根据您在阵列中的记录数量，您必须明智地决定部分。

由于

Answer 3

＆＃13;

const 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
}];

let listNumber = 1;

const template = arr1.reduce((template, item, index) => {

  if (index % 2 === 0) {
    return template +=
    `<div class="best order1" id="one">
      <h1>List ${listNumber++}</h1>
      ${item.Item}, ${item.Quantity} </br>
    `;
  }

  return  template +=
    `  ${item.Item}, ${item.Quantity}
    </div>`;

}, '')

const resultHTML =
`<div class="container">
  ${template}
</div></br>`;

function list(){
  document.getElementById('content').innerHTML = resultHTML;
}

document.getElementById('btn').onclick = list;

＆＃13;

<html>
  <body>
    <div id='content'></div>
    <input type="button" id='btn' value="List">
  </body>
</html>

＆＃13;

我会使用reduce来动态创建HTML：

let listNumber = 1;

const template = arr1.reduce((template, item, index) => {

  if (index % 2 === 0) {
    return template +=
    `<div class="best order1" id="one">
      <h1>List ${listNumber++}</h1>
      ${item.Item}, ${item.Quantity}
    `;
  }

  return template +=
    `  ${item.Item}, ${item.Quantity}
    </div>`;

}, '');

如果你不使用es6，你可以用旧的方式连接字符串。

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

3 个答案: