[英]Add cards in html via javascript
我通过循环添加了 3 张卡片。 我的问题是我想把这 3 张卡放在一起,而不是放在一起。 我希望它们水平排列。
arr = [{ "Name": "Peter", "Job": "Programmer" }, { "Name": "John", "Job": "Programmer" }, { "Name": "Kevin", "Job": "Scientist" }, ]; $.each(arr, function(i) { var templateString = '<div class="card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body"> <h5>' + arr[i].Name + '</h5> </p></div> </div>'; $('#test').append(templateString); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-4 col-sm-6 col-xs-12"> <div id="test"></div> </div>
试试下面:
#test
{
display:flex;
}
将此 css 用于您的 div test
#test
{
position: absolute;
height: 40px;
width: 250px;
background: white;
display: flex;
}
一个工作演示: https : //jsfiddle.net/athulmathew/hdwbf5n2/6/
默认情况下,由于 Div 的默认块属性,Div 垂直添加子项,如果您想在水平方向在 div 中添加项目,则将显示属性更改为 flex,将 flex-direction 设置为行(默认情况下为行,因此您可以无视)。 因为您在这里使用引导程序,所以您也可以在这里使用row
类
<div id="test" class="row"></div>
或者
<div id="test" style="display:flex"></div>
您需要像这样在 div 中添加样式:-
<div id="test" style = "display: block"></div>
我刚刚修改了你的代码如下:
<div class="col-md-4 col-sm-6 col-xs-12">
<div id="test" class="row">
</div>
</div>
<script>
var arr = [
{ "Name": "Peter", "Job": "Programmer" },
{ "Name": "John", "Job": "Programmer" },
{ "Name": "Kevin", "Job": "Scientist" },
];
$.each(arr, function (i) {
var templateString = '<div class="col-md-4"><div class="card mb-2 box-shadow"><img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"><div class="card-body"><h5>' + arr[i].Name + '</h5></p></div></div></div>';
$('#test').append(templateString);
})
</script>
也许这就是你想要的。
Try with below code.
<script>
arr = [
{"Name":"Peter","Job":"Programmer"},
{"Name":"John","Job":"Programmer"},
{"Name":"Kevin","Job":"Scientist"},
];
$.each(arr, function(i){
var templateString = '<div class="col-md-4 col-sm-6 col-xs-12"><div class="card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body"> <h5>'+arr[i].Name+'</h5> </p></div> </div></div>';
$('#test').append(templateString);
})
</script>
<div class="row">
<div id="test"></div>
</div>
简单的解决方案是正确使用引导网格。 您可以为<div id="test">
使用row
类并附加<div class="col-4">
以将三张卡片排成一行。 以下是相同的工作片段。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row" id="test"></div> </div> <script> arr = [{ "Name": "Peter", "Job": "Programmer" }, { "Name": "John", "Job": "Programmer" }, { "Name": "Kevin", "Job": "Scientist" }, ]; $.each(arr, function(i) { var templateString = '<div class="col-sm-4 card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body p-0"> <h5>' + arr[i].Name + '</h5> </p></div> </div>'; $('#test').append(templateString); }) </script> </body> </html>
您只需将类row
添加到您的测试 div 中即可: <div id="test" class="row"></div>
这是完整的片段:
arr = [{ "Name": "Peter", "Job": "Programmer" }, { "Name": "John", "Job": "Programmer" }, { "Name": "Kevin", "Job": "Scientist" }, ]; $.each(arr, function(i) { let templateString = '<div class="card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body"> <h5>' + arr[i].Name + '</h5> </p></div> </div>'; $('#test').append(templateString); })
/* not relevant only for visibility within snippet*/ .card { width: 150px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-md-4 col-sm-6 col-xs-12"> <div id="test" class="row"></div> </div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row" id="test"></div> </div> <script> arr = [{ "Name": "Peter", "Job": "Programmer" }, { "Name": "John", "Job": "Programmer" }, { "Name": "Kevin", "Job": "Scientist" }, ]; $.each(arr, function(i) { var templateString = '<div class="col-sm-4 card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body p-0"> <h5>' + arr[i].Name + '</h5> </p></div> </div>'; $('#test').append(templateString); }) </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.