Добавить карты в html через javascript - PullRequest
Новая
       1

Добавить карты в html через javascript

0 голосов
/ 26 июня 2019

Я добавил 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>

Ответы [ 8 ]

1 голос
/ 26 июня 2019

По умолчанию Div добавляет дочерние элементы по вертикали из-за свойства блока по умолчанию для Div, если вы хотите добавить элементы в div в горизонтальном направлении, тогда для свойства display сгибать с flex-direction следует установить на row (это по умолчаниюстрока, чтобы вы могли игнорировать это).потому что вы используете здесь начальной загрузки, так что вы также можете использовать класс row здесь 

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

или 

<div id="test" style="display:flex"></div>
1 голос
/ 26 июня 2019

используйте этот CSS для вашего div test

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

рабочая демонстрация: https://jsfiddle.net/athulmathew/hdwbf5n2/6/

1 голос
/ 26 июня 2019

Попробуйте ниже: 

#test
{
  display:flex;
}
0 голосов
/ 26 июня 2019

Вы можете сделать это, просто добавив класс 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>
0 голосов
/ 26 июня 2019

Простым решением является правильное использование загрузочной сетки.Вы могли бы использовать row класс для вашего <div id="test"> и добавить <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>
0 голосов
/ 26 июня 2019 
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>
0 голосов
/ 26 июня 2019

Я только что изменил ваш код, как показано ниже: 

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

Может быть, это то, что вы хотите.

0 голосов
/ 26 июня 2019

Вам нужно добавить стиль в div следующим образом: - 

<div id="test" style = "display: block"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...