如何在每次数据可用时一次将三个项目追加到一行中

Question

我的问题如下：我需要绘制Bootstrap转盘的容器及其项目，但例如，当项目为6时，我只想显示转盘的2个容器，而当项目为9时，我想显示3个容器，依此类推。。。

我不知道如何填充容器和绘制容器，只有当三个项目的集合可用时，以及当超过3个项目时，如何显示超过1个容器。

我需要动态显示容器，我的意思是，根据来自JSON请求的三个项目的总集合来创建容器(如果你想，你不需要向我显示AJAX，只有使用算法才能让我了解如何解决我的问题(。

这是我现在拥有的一个示例代码：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

我想动态绘制项目，例如：

$.ajax({
method: "GET",
url: "API/items.php",
Type: "json",
data: { Event: "store" }
}).done(function( data ) {
data=$.parseJSON(data);
$.each(data,function(index,element){
if((index+1%3)==0){ // I am not quite sure what to put in here    
$("#carouselExampleControls .carousel-inner").append(
'<div class="row">'+
'<div class="col-4">'+
'<h4>Title</h4>'+
'<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>'+
'</div>'+
'</div>'
);
}else{
$("#carouselExampleControls .carousel-inner .row").append(
'<div class="col-4">'+
'<h4>Title</h4>'+
'<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>'+
'</div>'
}
})

谢谢你和祝福。

Answer 1

您可以检查index % 3 == 0是否使用一些变量来附加外部div，即：carousel-item然后在该div内附加新行，最后如果index % 3 == 2关闭外部div。在附加了所有记录之后，您可以使用.html()将生成的html附加到carousel-innerdiv中。

演示代码 :

//dummy datas
var data = [{
"id": 1
}, {
"id": 2
}, {
"id": 3
}, {
"id": 4
}, {
"id": 5
}, {
"id": 6
}, {
"id": 7
}]
var html = ""; //declare this
$.each(data, function(index, element) {
//check if the index is divisble by 3
if (index % 3 == 0) {
//out elemnt appends
html += "<div class='carousel-item'>"
}
//appends rows
html +=
'<div class="row">' +
'<div class="col-4">' +
'<h4>Title</h4>' +
'<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>' +
'</div>' +
'</div>' + element.id;
//check if has remainder 2 
if (index % 3 == 2 && (index != 0)) {
html += "</div>"; //close outer div
}
})
$(".carousel-inner").html(html) //add result to div

.carousel-item {
background-color: pink
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
</div>
</div>