使用 jQuery 创建和附加数据块

Question

我正在创建一个 Web 应用程序，它使用 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);
}

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

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>

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

使用 jQuery 创建和附加数据块

Creating and appending blocks of data using jQuery

css

jquery

json

mediawiki-api