stackoom
  简体   繁体   中英

Add cards in html via javascript

 原文  2019-06-26 06:46:31  6   9    javascript/ html/ bootstrap-4

Question

I've added 3 cards through a loop. My problem here is that I want to put these 3 cards together, not below each other. I want them to be ordered horizontally. 

 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>

9 answers

solution1
 1  2019-06-26 06:50:51

Try below:

#test
{
  display:flex;
}

solution2
 1  2019-06-26 06:55:18

use this css for your div test

#test
{
 position: absolute;
  height: 40px;
  width: 250px;
  background: white;
  display: flex;
 }

a working demo: https://jsfiddle.net/athulmathew/hdwbf5n2/6/

solution3
 1  2019-06-26 06:59:07

By default, Div adds children vertically due to default block property of Div, if you want to add items in div in horizontal direction then change the display property to flex with flex-direction should be set to row(it is by default row so you can ignore it). because you are using bootstrap here so you can also use the row class here

 <div id="test" class="row"></div>

or

<div id="test" style="display:flex"></div>

solution4
 0  2019-06-26 06:50:14

您需要像这样在 div 中添加样式：-

<div id="test" style = "display: block"></div>

solution5
 0  2019-06-26 07:00:43

I just modified your code as below:

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

Maybe that's what you want.

solution6
 0  2019-06-26 07:01:31

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>

solution7
 0  2019-06-26 07:07:32

Simply solution is using proper usage of bootstrap grid. You could have used row class for your <div id="test"> and append <div class="col-4"> for having three cards in row. Below is the working snippet for the same. 

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

solution8
 0  2019-06-26 07:15:12

You can do that by just adding the class row to your test div: <div id="test" class="row"></div>

Here is the full snippet: 

 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>

solution9
 0  2020-07-27 20:27:46

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Rendering HTML cards via JavaScript problem HTML and Javascript search bootstrap cards Add class (odd and even) in html via javascript? add HTML ID via DOM javascript manpulation Add HTML control(s) via javascript How to add class to an element in Html or via Javascript? Add a custom property to HTML element via Javascript Generating dynamic html cards from a javascript array How to add onclick event in dynamicly add html code via JavaScript? Add Button for Selected Product Cards using JavaScript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM