在 Javascript 中连续打印 X 数量的项目

Question

我想连续打印 4 个项目，我正在使用下面的代码，它可以工作，但有一个缺陷，我不知道如何修复。

for (i=0; i < items.length; i++) {
  if (items.length-1 == i) {
    document.getElementById("items").innerHTML += "<div style='display: inline-block;'>" + items[i] + "</div>"
  } else {
    if (i % 4 == 0) {
      document.getElementById("items").innerHTML += "<div style='display: inline-block;'>" + items[i] + "</div>, <br>"
     } else {
      document.getElementById("items").innerHTML += "<div style='display: inline-block;'>" + items[i] + "</div>, "  
     }

它总是这样打印：

#,
#,#,#,#,
#,#,#,#,
#,#,#

我希望它像这样打印：

#,#,#,#,
#,#,#,#,
#,#,#,#

Answer 1

变化：

if (i % 4 == 0) {
  document.getElementById("items").innerHTML += "<div style='display: inline-block;'>" + items[i] + "</div>, <br>"

到

 if (i % 4 == 0 && i!= 0) {
  document.getElementById("items").innerHTML += "<br><div style='display: inline-block;'>" + items[i] + "</div>,";

http://jsfiddle.net/yefxjx0r/

更清洁的解决方案是： http://jsfiddle.net/d7me3dff/

Answer 2

您检查'#'是否打印的条件有误。它应该是 if ((i+1) % 4 == 0)

for (i = 0; i < items.length; i++) {
    if (items.length - 1 == i) {
        document.getElementById("items").innerHTML += "<div style='display: inline-block;'>" + items[i] + "</div>"
    } else {
        if ((i + 1) % 4 == 0) {
            document.getElementById("items").innerHTML += "<div style='display: inline-block;'>" + items[i] + "</div>, <br>"
        } else {
            document.getElementById("items").innerHTML += "<div style='display: inline-block;'>" + items[i] + "</div>, "
        }
    }
}

检查此 fiddle。

http://jsfiddle.net/ktyLkypp/

Answer 3

问题出在这里：

if (i % 4 == 0)

您需要：(i+1) % 4 == 0 ...数组索引从 0 开始，因此第 4 个元素的索引为 3。

Answer 4

只需将 if (i % 4 == 0) 更改为 if (i % 4 == 3)

Answer 5

维护你的代码结构，因为数组的索引从0开始，但你需要检查索引%4，你可以这样重写for条件：for (i=1; i <= items.length; i++) {并访问项目items[i-1].

直播example.

Answer 6

我会做这样的事情。

CSS

.item {
    display: inline-block;
}

HTML

<div id='items'></div>

Javascript

var itemsEl = document.getElementById("items"),
    items = ['#', '#', '#', '#', '#', '#', '#', '#', '#', '#', '#', '#'],
    itemsLen = items.length,
    itemLast = itemsLen - 1,
    iter,
    itemDiv,
    groupDiv;

for (iter = 0; iter < itemsLen; iter += 1) {
    itemDiv = document.createElement('div');
    itemDiv.className = 'item';
    itemDiv.appendChild(document.createTextNode(items[iter]));

    if (iter % 4 === 0) {
        groupDiv = itemsEl.appendChild(document.createElement('div'));
        groupDiv.className = 'group'
    }

    if (iter !== itemLast) {
        itemDiv.appendChild(document.createTextNode(','));
    }

    groupDiv.appendChild(itemDiv);
}

在 jsFiddle

额外

根据项目的数量，您可以通过使用 documentFragment 来改进这一点，您可以将您的组和项目附加到其中，然后只有在完成后才将片段附加到 DOM.

在 Javascript 中连续打印 X 数量的项目

Printing X amount of Items in a Row in Javascript

javascript

printing

sorting

loops

row