jquery - 使用 jQuery 创建和附加数据 block

Question

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

这是 json:

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

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

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

我尝试迭代条目并将条目附加到 block :

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

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

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