Question

我希望迭代一个JSON数组并在一行内打印结果（3个相等的列）。实际的方法并不尊重bootstrap背后的逻辑，所以我怎么能告诉JS只包含3个元素然后克隆一个类似的div。这是一个可运行的代码，因此您可以了解问题。应该在大屏幕上观看。感谢。

＆＃13;

var url = "https://api.openaq.org/v1/countries?order_by=count&sort=desc";

  $.getJSON(url, function (data) {

    $.each(data.results, function(i, result) {
      $('#data').append(
          $('<h2>').text(result.name),
          $('<div>').text("Code = " + result.code),
          $('<div>').text("Score = " + result.count),
          $('<hr>').text("  "),
        );
    });

  });

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">

    <h1></i>Open, real-time and historical air quality data</h1> 

    <hr>


    <div class="row" style="background-color: #ddd">
    <div class="col-md-4" id="data" style="background-color: #fe8000" ></div>
    </div>

    <h6 style="padding-bottom: 25px">Source: This data is licensed under the Creative Commons Attribution 4.0 Generic License. It is attributed to OpenAQ. 
    The software is licensed as below with The MIT License.</h6>

</div> 

<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>

＆＃13;

Answer 1

这是您的代码稍作修改，以完成3列。

请注意，那里有一些额外的颜色。我删除了，因为它看起来不太好。那是因为理想情况下全高度div看起来会更好。在某些方面，不使用twitters网格系统和使用flexbox可能会产生更好的结果。

请注意，您需要使用此代码段进入全屏，否则您将看不到3列显而易见的原因。那或将col-md-4改为col-xs-4 ..

var url = "https://api.openaq.org/v1/countries?order_by=count&sort=desc";

  $.getJSON(url, function (data) {

    $.each(data.results, function(i, result) {
      $('#data').append(
          $('<h2 class="col-md-4">').text(result.name),
          $('<div class="col-md-4">').text("Code = " + result.code),
          $('<div class="col-md-4">').text("Score = " + result.count),
        );
    });

  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">

    <h1></i>Open, real-time and historical air quality data</h1> 

    <hr>

    <div class="row" style="background-color: #ddd" id="data" style="background-color: #fe8000">
    </div>

    <h6 style="padding-bottom: 25px">Source: This data is licensed under the Creative Commons Attribution 4.0 Generic License. It is attributed to OpenAQ. 
    The software is licensed as below with The MIT License.</h6>

</div> 

<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>

Answer 2

在屏幕宽度上查看以下代码的输出＆gt; = 992px;

我没有使用table来创建一个由每行3列组成的网格，而不是使用div（如你的情况）。

刚刚使用class col-md-4创建了动态div，并显示了json响应中的每个数据，并将其附加到当前div#data。

let url = "https://api.openaq.org/v1/countries?order_by=count&sort=desc";

$.getJSON(url, function(data) {

  $.each(data.results, function(i, result) {
	let divContent = '<h2>'+result.name+'</h2>'+
						'<div>'+result.code+'</div>'+
						'<div>'+result.count+'</div>';
	let div = "<div class='col-md-4 col-sm-4' data-idx="+i+">"+divContent+"</div>";
    
	$('#data').append(div);
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Open, real-time and historical air quality data</h1>
  <hr>
  <div class="row" style="background-color: #ddd">
    <div class="col-md-12" id="data" style="background-color: #fe8000">         </div>
  </div>
  <h6 style="padding-bottom: 25px">
		Source: This data is licensed under the Creative Commons Attribution 4.0 Generic License. It is attributed to OpenAQ.The software is licensed as below with The MIT License.
	</h6>
</div>

希望，这适合你。：）

Answer 3

此版本打印单独的mid-col-4以及API请求中的一些信息：

＆＃13;

  var url = "https://api.openaq.org/v1/countries?order_by=count&sort=desc";

$.getJSON(url, function (data) {

  $.each(data.results, function(i, result) {
    $('#data').append(
      $('<div class="col-md-4" style="padding: 30px; border-top: 1px solid #F6F6F6">').html
      ('<h2>' + result.name + '</h2>' + "Code = " +  result.code + '<br>' + "Score = " + result.count),
  );

  });


});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Open, real-time and historical air quality data</h1>
  <hr>
  
<div class="row" id="data"></div

  <h6 style="padding-bottom: 25px">
		Source: This data is licensed under the Creative Commons Attribution 4.0 Generic License. It is attributed to OpenAQ.The software is licensed as below with The MIT License.
	</h6>
</div>

＆＃13;

使用JS循环

3 个答案: