php - 等待 $.each 在 $.getJSON 内完成

Question

我想通过在数据库中查询表的某一列中的唯一属性来生成侧边栏的链接列表。我打算创建这些链接，然后查询共享该值的所有条目。

我正在使用 $.getJSON()方法获取数据并编辑 DOM。我知道在 $.getJSON() 中使用 JSON 数组的唯一方法方法是运行 $.each()就这样，从for(i=0;i<object.key.length();i++)开始语句似乎在匿名回调函数中不起作用。

我的 JSON 对象的结构如下

{"M" : [
  {"category" : "value1"},
  {"category" : "value2"},
  {"category" : "value3"}],
"Q" : [
  {"category" : "same shit"},
  {"category" : "different heading"}]
}

我的代码有问题的部分如下

$sidebar.html("<h1>Catalog</h1>");
$.getJSON("script.php", function(data) {
  $sidebar.append("<h2>Manufacturing</h2><ul>"); // open the <ul> tag
  $.each(data.M, function(i, row) {
    $sidebar.append("<li><a>" + row.category + "</a></li>");
  });
  $sidebar.append("</ul>"); // close out the <ul> tag AFTER the $.each
});

这使得我的侧边栏的 HTML 采用以下形式

<h1>...</h1>
<h2>...</h2>
<ul>...</ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>

我觉得这非常烦人。我一直在尝试应用 $.promise().done() these中建议的策略three posts正是问这个问题，但这些提问者都没有使用 $.each()存在于 PHP 调用函数内。我无法使脚本以正确的顺序构造无序列表。它不断关闭<ul>在附加任何列表项之前标记。

我已经链接了 .done()和.promise().done()到$.each ，到$sidebar我正在附加，甚至附加到 $.getJSON()本身只是为了看看这是否可行(即使它的工作不会帮助我达到向脚本中添加更多数组并完成它的地步)。

我非常沮丧，因为三个引用帖子的答案都坚持认为 $.each()应该在移动到下一行之前完成，除非说 $.each()涉及动画或 AJAX 调用，需要花费不可忽略的时间才能完成。我的应用程序没有这些陷阱，但似乎无论如何都是异步运行的。

In this JFiddle您可以看到每个附加的标签不属于 <ul> 范围内标签，因为 CSS 会将其变为绿色而不是红色。

Answer 1

问题是您正在调用 .append()并附加无效的 HTML。浏览器不允许将无效的html插入到dom中，因此它会关闭<ul>为您，您将附加您的 <li> <ul>之外.

您应该创建您的 <ul>单独附加新的 <li>到此，然后插入完成的 <ul>进入dom。

  $sidebar.append("<h2>Manufacturing</h2>");
  ul = $('<ul>');
  for(...) {
     ul.append('<li>...</li>');
  }
  $sidebar.append(ul);