Question

我有两个json文件，其中包含所有新闻标题和针对该新闻的特定主题的内容（不要问我原因），所以我要做的是加载所有标题的网址并在搜索之后正确内容的ID。

看起来像那样：

$.ajax({
    url: 'http://website.com/news.json?=list',
    dataType: 'json',
    success: function (data) {

        $.each(data.news, function (newsId, newsHeadline) {
            $('h1').after('<h2 id="question-' + newsId + '">' + newsHeadline + '</h2>');

            $.get('http://website.com/news.json?=list&id=' + newsId, function (data) {

                $('h2').after('<div class="accordion-content">' + data.result.newscontent + '</div>');

            });

        });

    }

});

到目前为止，它的工作几乎与预期一致，它正在加载标题和加载内容后。

问题是它正在为每个标题加载所有内容。例如，通过第一个网址有2个标题。

所以它应该是：

 Headline 1
  Content 1
 Headline 2
  Content 2

但相反它给了我：

 Headline 1
  Content 1
  Content 2
 Headline 2
  Content 1
  Content 2

Answer 1

当您在<h2>处理程序中追加时，您未对$.get()的引用进行限定。因此，内容会附加到所有 <h2>元素。

Answer 2

这是因为ajax调用工作的异步方式在第一个循环中，您使用回调执行ajax调用并继续第二个循环调用（无需等待ajax完成）。
ajax回调可以在另一个循环中，所以不是得到1-1,2-2.3-3你将获得1-2,2-2,3-2,4-3 ...
如果你需要它保持不变，你应该考虑采用线性方式而不是嵌套的异步回调。

Answer 3

我认为这可能与使用数据变量两次有关。试试这个：

$.ajax({
    url: 'http://website.com/news.json?=list',
    dataType: 'json',
    success: function (data) {

        $.each(data.news, function (newsId, newsHeadline) {
            $('h1').after('<h2 id="question-' + newsId + '">' + newsHeadline + '</h2>');

            $.get('http://website.com/news.json?=list&id=' + newsId, function (data2) {

                $('h2').after('<div class="accordion-content">' + data2.result.newscontent + '</div>');

            });

        });

    }

});

修改

糟糕......看起来Pointy是正确的。 $。get（）函数中的 $（'h2'）选择器将获取页面上的所有h2 HTML元素。

Json调用＆amp;循环内部json调用＆amp;循环

3 个答案: