使用 jQuery 创建和附加数据块答案

【问题标题】：Creating and appending blocks of data using jQuery使用 jQuery 创建和附加数据块
【发布时间】：2017-02-12 23:59:58
【问题描述】：

我正在创建一个网络应用程序，它使用 mediapedia API 查询 10 个维基百科条目，并以块的形式显示每个条目。

这是 json：

https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=Shakira&limit=10&profile=fuzzy

我想要做的是将这些条目全部显示在彼此下方的块中。所以我正在考虑使用for loop 来遍历每个条目，然后使用 jQuery 来附加从上到下分层的每个块。我将如何做到这一点？

为了简单起见，这是我的代码笔： http://codepen.io/tadm123/pen/oBqwYZ

我尝试迭代并将条目附加到块：

for(var i=0;i<10;i++)
{
    title = a[1][i];
    descr = a[2][i];
    link =a[3][i];

    var b = $('<a href = "' + link '"><div class="panel panel-info"><p class="panel-heading">' + title + '</p><p class="panel-body">' + descr + '</p></div></a>');

    $('#block').append(b);
}

如果有任何帮助，我将不胜感激。谢谢。

【问题讨论】：

标签： jquery css json mediawiki-api

【解决方案1】：

你所拥有的似乎工作，除了你在var b 中的link 之后缺少+。而b 可以只是一个普通变量 - 无需将其包装在 jQuery 中。

$.getJSON("https://cors-anywhere.herokuapp.com/http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=Shakira&limit=10&profile=fuzzy", function(a) {

  for (var i = 0; i < 10; i++) {
    var title = a[1][i],
      descr = a[2][i],
      link = a[3][i],
      b = '<a href = "' + link + '"><div class="panel panel-info"><p class="panel-heading">' + title + '</p><p class="panel-body">' + descr + '</p></div></a>';

    $('#block').append(b);
  }

});

.form {
  text-align: center;
  margin: 50px;
  font-size: 20px;
}

.glyphicon {
  font-size: 20px;
}

.panel {
  margin: auto;
  width: 1000px;
  border-radius:
}

.panel-heading {
  font-size: 20px;
  text-align: center;
}

.panel-body {
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">


<div class="form">
  <input type="text" placeholder="Search for...">
  <button class="glyphicon glyphicon-search" aria-hidden="true"></button>
</div>


<div id="block"></div>

【讨论】：

【解决方案2】：

您可以使用 forEach 遍历数组：

a.forEach(function(row){
    title= row[1];
    descr = row[2];
    link =row[3];

    var b = $('<a href = "' + link +'"><div class="panel panel-info"><p class="panel-heading">' + title + '</p><p class="panel-body">' + descr + '</p></div></a>');

    $('#block').append(b);
});

【讨论】：