如何使用 jquery 重复 x 行，每行 3 列？
Posted
技术标签:
【中文标题】如何使用 jquery 重复 x 行，每行 3 列？【英文标题】：How do I repeat x amount of rows with 3 columns in each row using jquery? 【发布时间】：2020-10-22 15:26:59 【问题描述】：我想创建一个 boostrap“卡片”，每行包含 3 张相同的卡片，当然还有 x 行。我尝试了以下方法并花了 3 个小时但失败了。
$.getJSON("./listings.php", function(e)
$.each(e, function(i, e)
if (e.id != "")
//create table here
var html = '<div class="card-deck mb-3 text-center">'; // this opens the row
//here are the three columns
html += '<div class="card mb-4 box-shadow" style="background-image:url(./'+e.img+');background-size:330px; auto;background-repeat:no-repeat; background-position:center;">';
html += '<div class="card-header" style="background-color: #5bc0de;">';
html += '<h4 class="my-0 font-weight-normal">'+e.status+'</h4>';
html += '</div>';
html += '<div class="card-body">';
html += '<h1 class="card-title pricing-card-title"> </h1>';
html += '<ul class="list-unstyled mt-3 mb-4">';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '</ul>';
html += '<button type="button" id="'+e.id+'" class="community btn btn-block btn-outline-primary">Visit Platform</button>';
html += '</div>';
html += '</div>';
//end of 3rd column
html += '</div>'; //this closes the row
$('.community_listing').append(html); //this is just an empty div to host the rows
)
);
:(
【问题讨论】：
【参考方案1】：最好的选择是您可以将包装器设置为flex。所以它会显示你的卡片与设备宽度。并且会自动响应。
如果您想严格每行显示 3 张卡片，请告诉我。我将根据它编辑我的答案。
//$.getJSON("./listings.php", function(e)
var data = [id:1, img:"", status:1, id:2, img:"", status:2, id:3, img:"", status:1, id:4, img:"", status:3, id:5, img:"", status:1];
$.each(data, function(i, e)
if (e.id != "")
//create table here
var html = '<div class="card-deck mb-3 text-center">'; // this opens the row
//here are the three columns
html += '<div class="card mb-4 box-shadow" style="background-image:url(./'+e.img+');background-size:330px; auto;background-repeat:no-repeat; background-position:center;">';
html += '<div class="card-header" style="background-color: #5bc0de;">';
html += '<h4 class="my-0 font-weight-normal">'+e.status+'</h4>';
html += '</div>';
html += '<div class="card-body">';
html += '<h1 class="card-title pricing-card-title"> </h1>';
html += '<ul class="list-unstyled mt-3 mb-4">';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '</ul>';
html += '<button type="button" id="'+e.id+'" class="community btn btn-block btn-outline-primary">Visit Platform</button>';
html += '</div>';
html += '</div>';
//end of 3rd column
html += '</div>'; //this closes the row
$('.community_listing').append(html); //this is just an empty div to host the rows
)
//);.community_listing
display: flex;
flex-wrap: wrap;
.card-deck
width: 300px;
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="community_listing"></div>You can also check the working fiddle here.
【讨论】：
哦，谢谢！是的，我每行需要严格 3 张卡片。【参考方案2】：我想我现在明白你的问题了。您希望卡片具有相同的高度，这就是您使用卡片组的原因。
例如，我已经覆盖了变量“data”以进行测试，并注释掉了 JSON 查询。我希望这可以帮助你。
var targetContainer = $('.community_listing');
//$.getJSON("./listings.php", function(data)
var data = [id:1, img:"", status:1, id:2, img:"", status:2, id:3, img:"", status:1, id:4, img:"", status:3, id:5, img:"", status:1];
var html = '',
dataLength = data.length,
rowClosed = false;
// do you really have elements with an empty id?
data = data.filter(function(i, e)
return e.id != "";
);
$.each(data, function(i, e)
rowClosed = false;
// check with modulo each third element and start a new row
if (i % 3 == 0)
html += '<div class="card-deck text-center">'; //this opens the row
// here are the three columns
html += '<div class="card mb-4 box-shadow" style="background-image:url(./' + e.img + '); background-size: 330px auto; background-repeat: no-repeat; background-position: center;">';
html += '<div class="card-header" style="background-color: #5bc0de;">';
html += '<h4 class="my-0 font-weight-normal">' + e.status + '</h4>';
html += '</div>';
html += '<div class="card-body">';
html += '<h1 class="card-title pricing-card-title"> </h1>';
html += '<ul class="list-unstyled mt-3 mb-4">';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '<li> </li>';
html += '</ul>';
html += '<button type="button" id="' + e.id + '" class="community btn btn-block btn-outline-primary">Visit Platform</button>';
html += '</div>';
html += '</div>';
// check with modulo each third element and close the current row
if (i != 0 && i % 3 == 2)
html += '</div>'; //this closes the row
rowClosed = true;
);
// if the last row has just two element, close the the row here
if (!rowClosed)
html += '</div>'; // this closes the row
targetContainer.append(html); //this is just an empty div to host the rows
//);<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="community_listing"></div>【讨论】：
以上是关于如何使用 jquery 重复 x 行，每行 3 列？的主要内容，如果未能解决你的问题，请参考以下文章