向每個容器加載一定數量的元素

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

顯然我正在為每個content加載一個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>') } 

 .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次並將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組為單位顯示所有元素

 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; } } 

 .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>