在迭代数组时,我想将前两个数组项显示到第一个 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
最佳答案
一种可能的解决方案是添加另一个嵌套循环来控制项目的部分,这样您就不需要 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>
关于javascript - 如何在迭代时将数组项显示到不同的 div 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49951457/