Question

我正在尝试遍历一个项目数组，并根据我们在数组中的计数来构建HTML结构。

它应该包含单元格中的每个项目和一行中的每4个项目以及列div中的每8个项目。

这是JavaScript：

var html = ''; // for those that were asking where html was...

for(var i=0;i<response.length;i++)
{
     // for first and every 8 items
     if(i == 0 || i % 8 === 0)
    {
        console.log('columnstart');
        html = html + '<div class="column">';
    }

    //  for first and every 4 items
    if(i == 0 || i % 5 === 0)
    {
        console.log('rowstart');
        html = html + '<div class="row">';
    }

    // after every 4 items BUT NOT the first
    if(i % 4 === 0 && i !== 0) 
    {
        console.log('rowend');
        html = html + '</div>';
    }

    // after every 8 items BUT NOT the first
    if(i == response.length && i !== 0 || i % 7 === 0 && i !== 0)
    {
        console.log('columnend');
        html = html + '</div>';
    }

    console.log('cell');
    html = html + '<div class="cell"></div>';
}

这是一个如何呈现HTML的示例：

<div class="column">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>
<div class="column">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

然而，似乎我的计数已经结束......

因为我在控制台中获得了以下内容：

columnstart
rowstart
cell
cell
cell
cell
cell
rowend
rowstart
cell
cell
cell
columnend
columnstart
cell
rowend
cell
rowstart
cell
cell

Answer 1

好吧，你的逻辑似乎有很多错误，所以我只是重写了整个事情。基本上，将第一个和最后一个元素视为特殊情况，这样计数逻辑就不需要那么复杂。

有关更多信息，请参阅评论：

var html = '';

for (var i = 0; i < response.length; i++) {
    // If first element, open column and row and add first cell.
    if (i == 0) {
        html = html + '<div class="column">';
        html = html + '<div class="row">';
        html = html + '<div class="cell"></div>';

        // If the first element, is also the last, then close row and column now.
        if (i == response.length - 1) {
            html = html + '</div>';
            html = html + '</div>';
        }
    }
    // If last element, add last cell and close row and column.
    else if (i == response.length - 1) {
        html = html + '<div class="cell"></div>';
        html = html + '</div>';
        html = html + '</div>';
    }
    // Otherwise, process based on count.
    else {
        // If end of row, then close row.
        if (i % 4 == 0) {
            html = html + '</div>';
        }

        // If end of column close column, open new column.
        if (i % 8 == 0) {
            html = html + '</div>';
            html = html + '<div class="column">';
        }

        // If end of row, open new row.
        if (i % 4 == 0) {
            html = html + '<div class="row">';
        }

        // Insert the cell.
        html = html + '<div class="cell"></div>';
    }
}

Here is a working example

Answer 2

我害怕你误解了模（%）运算符

i % 7==0表示i可被7整除，您想要的是i % 8==7

我总是用switch声明发现它更清楚：

while (response.length%8!=7)
    response.push('');
var html='';
for(var i=0;i<response.length;i++)
{
    switch (i%8) {
        case 0:  html = html + '<div class="column"><div class="row">'+response[i];break;
        case 4:  html = html + '</div><div class="row">'+response[i];break;
        case 7:  html = html + response[i]+'</div></div>';break;
        default: html = html + response[i];
    }
}

Answer 3

应该是

for(var i=0;i<response.length;i++)
{
 // Before 1st and every 8 cells
 if(i % 8 == 0)
{
    console.log('columnstart');
    html = html + '<div class="column">';
}

//  Before 1st and every 4 items
if(i % 4 == 0)
{
    console.log('rowstart');
    html = html + '<div class="row">';
}

console.log('cell');
html = html + '<div class="cell"></div>';

// after every 4th cell added
if(i % 4 == 3) 
{
    console.log('rowend');
    html = html + '</div>';
}

// after every 8th cell added
if(i % 8 ==7)
{
    console.log('columnend');
    html = html + '</div>';
}


}

Answer 4

一些tyypos：

//  for first and every 4 items
if(i == 0 || i % 5 === 0)
{
    console.log('rowstart');
    html = html + '<div class="row">';
}

应该是：

//  for first and every 4 items
if(i == 0 || i % 4 === 0)
{
    console.log('rowstart');
    html = html + '<div class="row">';
}

一两个typpo，以及逻辑和优先级的问题：

// after every 8 items BUT NOT the first
if(i == response.length && i !== 0 || i % 8 === 0 && i !== 0)
{
    console.log('columnend');
    html = html + '</div>';
}

应该是：

// after every 8 items BUT NOT the first
if(i === response.length - 1 || (i !== 0 && i % 8 === 0))
{
    console.log('columnend');
    html = html + '</div>';
}

Answer 5

for(var i=0;i<response.length;++i)
{
     // for first and every 8 items
     if(i % 8 == 0) {
         console.log('columnstart');
         html = html + '<div class="column">';
     }

     //  for first and every 4 items
     if(i % 4 == 0) {
         console.log('rowstart');
         html = html + '<div class="row">';
     }

     console.log('cell');
     html = html + '<div class="cell"></div>';

     // after every 4 items BUT NOT the first
     if(i % 4 == 3) {
         console.log('rowend');
         html = html + '</div>';
     }

     // after every 8 items
     if(i % 8 == 7) {
         console.log('columnend');
         html = html + '</div>';
     }
}

循环遍历数组并根据计数添加到字符串

5 个答案: