Question

我试图在每个alert上加载超过9 .content，但结果是我将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个，那么它永远不会是真的，永远不会追加。您可以添加|| 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>

Answer 2

使用条件i % 9 == 8作为断点

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: