javascript - 向每个容器加载一定数量的元素

Question

如何设置循环以在每个 .content 类中包含 10 个 .alert 类？

    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>')
}

显然我正在为每个内容加载一个警报

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>')
}

.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

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

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>