Question

您能否告诉我如何设置循环以在每个.alert类中包含10 .content个课程

    var itemsNumber = Math.floor(Math.random() * 100) + 1;
for (i = 0; i < itemsNumber; i++) { 
    $('.contents').append(' <div class="content"><div class="alert alert-success" role="alert"> Alert '+i+'</div></div>')
}

显然我正在为每个alert

加载一个content

＆＃13;

var itemsNumber = Math.floor(Math.random() * 100) + 1;
for (i = 0; i < itemsNumber; i++) {
  $('.contents').append(' <div class="content"><div class="alert alert-success" role="alert"> Alert ' + i + '</div></div>')
}

＆＃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;

Answer 1

我不知道生成随机数的意义是什么，但你可以引入一个内循环，循环10次并将alert附加到content div。

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

.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

我认为你应该这样做，这样你就可以显示10个小组中的所有元素

＆＃13;

var itemsNumber = Math.floor(Math.random() * 100) + 1;
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;
  }
}

＆＃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 个答案: