javascript - 将元素加载到每个容器时遇到问题

Question

我试图在每个 .content 上加载不超过 9 个 alert，但结果我将每个数字打包在 9 个项目的组中，并消除任何小于10!

例如，如果随机数为 8，则内容中不会显示任何内容，或者如果随机数为 19，则仅显示两组内容

如何修复以下演示？

var itemsNumber = Math.floor(Math.random() * 50) + 1;
console.log(itemsNumber);
var contents = $('.contents');
var element = $('<div class="content"></div>');
for (var i = 0, j = 0; i < itemsNumber; i++, j++) {      
  element.append('<div class="alert alert-success" role="alert"> Alert ' + i + '</div>');
  if (j == 9) {
    contents.append(element);
    element = $('<div class="content"></div>');
    j = -1;
  }
}

.content {
  background: khaki;
  margin: 10px;
  border: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents text-center">

</div>

Answer 1

问题是您追加内容的条件是基于 j == 9 的，因此如果您的项目少于 9 个，则它永远不会为 true，也不会追加。您可以添加 || i === itemsNumber - 1 来判断您是否位于所有项目的末尾。

var itemsNumber = 8; //Math.floor(Math.random() * 50) + 1;
console.log(itemsNumber);
var contents = $('.contents');
var element = $('<div class="content"></div>');
for (var i = 0, j = 0; i < itemsNumber; i++, j++) {      
  element.append('<div class="alert alert-success" role="alert"> Alert ' + i + '</div>');
  if (j === 9 || i === itemsNumber - 1) {
    contents.append(element);
    element = $('<div class="content"></div>');
    j = 0;
  }
}

.content {
  background: khaki;
  margin: 10px;
  border: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents text-center">

</div>