Question

我有一个JSON结果，我想在列表项

中呈现为列

success: function (json) {
  for (var i = 0; i < json.data.length; i++) {
    $('#hasil').append("<div class='list-group-item'><div class='col-md-3' id='col1'></div><div class='col-md-3' id='col2'></div><div class='col-md-3' id='col3'></div></div>");
  }
}

但我迷失了如何将行填充为列。

JSON结果是：

image1
image2
image3
image4
image5
image6

我想将其显示为

image1 image2 image3
image4 image5 image6

任何提示？

Answer 1

您可以使用解决方案

var json = [1,2,3,4,5,6,7,8,9];
$('.container').append(`<div class='row'></div>`);
for (var i = 0; i < json.length; i++) {
  $('.row').append(`
    <div class='col-xs-4 col-sm-4 col-md-4' id='col${json[i]}'>Image${json[i]}</div>`);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container"></div>

连续的Bootstrap默认列大小为12，因此您需要将col大小定义为4而不是3。

希望这会对你有所帮助。

Answer 2

假设您想要的数据是json.data.X，那么您只需要像这样包含json

var html = `<div class='list-group-item'>
    <div class='col-md-3' id='col1'>`+ json.data[0] +`</div>
    <div class='col-md-3' id='col2'>`+ json.data[1] +`</div>
    <div class='col-md-3' id='col3'>`+ json.data[2] +`</div>
</div>`;

$('#hasil').append(html);

Answer 3

由于Bootstrap网格基于12列https://getbootstrap.com/docs/3.3/css/#grid，您可以制作＆＃34; 4＆＃34;宽度每行3个。

new

Answer 4

您需要将i增加3并在单个循环语句中生成3个元素。

＆＃13;

var json = {
  data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}

for (var i = 0; i < json.data.length; i += 3) {
  $('#hasil').append("<div class='list-group-item'><div class='col-md-3' id='col1'>" + json.data[i] + "</div><div class='col-md-3' id='col2'>" + json.data[i + 1] + "</div><div class='col-md-3' id='col3'>" + json.data[i + 2] + "</div></div>")
}

＆＃13;

.list-group-item div {
  display: inline-block
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hasil"></div>

＆＃13;

另外，最好通过在字符串变量中生成HTML来在for循环后追加整个字符串。

＆＃13;

var json = {
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  html = '';

for (var i = 0; i < json.data.length; i += 3) {
  html += "<div class='list-group-item'><div class='col-md-3' id='col1'>" + json.data[i] + "</div><div class='col-md-3' id='col2'>" + json.data[i + 1] + "</div><div class='col-md-3' id='col3'>" + json.data[i + 2] + "</div></div>";
}

$('#hasil').append(html);

＆＃13;

.list-group-item div {
  display: inline-block
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hasil"></div>

＆＃13;

将循环JSON设置为List Item中的columnar

4 个答案: