使用 JS 循环创建 Bootstrap 网格答案

【问题标题】：Create Bootstrap grid with JS loop使用 JS 循环创建 Bootstrap 网格
【发布时间】：2018-02-01 15:08:50
【问题描述】：

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

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("  "),
        );
    });

  });

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

【问题讨论】：

您想要一个包含 3 列的表格网格，打印来自 json 的数据并克隆这一行以附加并显示剩余的 json 数据。
@ChaitanyaGhule 你的意思是在 JS 中克隆？因为在 HTML 中不起作用。
不完全克隆，但类似于复制第一行的 html 标记 (tr) 并在接下来的连续行中显示剩余数据@Blacksun
这不起作用，因为您将它们全部放在一个“col-md-4”中，您当然需要 3..
@Keith 我尝试在一行中创建 3 个不同的 md-4。此外，在多行中。

标签： javascript css json twitter-bootstrap

【解决方案1】：

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

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

请注意，您需要使用此 sn-p 进入全屏模式，否则您将看不到 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>

【讨论】：

非常感谢！实际上，我正在调整您的代码以在一个 col-md-4 中打印 h2、p 等，而不是像您所做的那样创建表格。
你知道如何在js函数中添加html标签吗？类似于： $('
').text(result.name + '
' + '
' + "Code = " + result.code + '' + "Score = " + result.count)
您可以使用 html setter，而不是 text one.. 例如.. $('<div class="col-md-4">').html(result.name + '<br>' + '<h2>' + "Code = " + result.code + '<br>' + "Score = " + result.count)

【解决方案2】：

在屏幕宽度 >= 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>

希望，这对你有用。 :)

【讨论】：

【解决方案3】：

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

  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),
  );

  });


});

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

【讨论】：

' + "Code = " + result.code + '' + "Score = " + result.count)