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

Printing X amount of Items in a Row in Javascript

本文关键字：项目 打印 Javascript 连续 连续打      更新时间：2023-09-26

我想连续打印 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>, "  
     }

它总是像这样打印：

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

我希望它像这样打印：

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

问题就在这里：

if (i % 4 == 0)

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

我会做这样的事情。

.CSS

.item {
    display: inline-block;
}

.HTML

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

爪哇语

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。

检查是否要打印第四个"#"的条件是错误的。它应该是 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>, "
        }
    }
}

检查这个小提琴。

http://jsfiddle.net/ktyLkypp/

更改：

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/

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

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

活生生的例子。

相关文章：