javascript - 循环不按预期工作

Question

http://codepen.io/abdulahhamzic/pen/aNexYj

我试图让这个循环在屏幕上正确地打印出十个结果，但我的循环似乎有问题，我无法弄清楚那是什么。在 Mozilla 上，我只得到屏幕上显示的第一个结果，似乎循环在第一次迭代后卡住了，在 Chrome 上我得到了十个结果，但看起来循环仍在运行，因为我不能确实对新创建的元素进行了任何样式设置，而且我仍然在页面上看到加载图标。谁能帮我解决这个循环？这是代码:

var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=aa&limit=10&callback=?";
$(document).ready(function(){
  $.getJSON(url, function(json){
    for (var i = 0; i < json[1].length; i++){
      document.write("<div><span class='header' style='color:red'>" + json[1][i] + "</span><br>" + json[2][i] + "</div><br>")
    }
  })
})    

Answer 1

The document.write() function is dangerous并且在不同的浏览器上有不同的行为。最好不要使用它。您可以拥有类似于下面的工作代码:

var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=aa&limit=10&callback=?";
$(document).ready(function(){
  $.getJSON(url, function(json){
    for (var i = 0; i < json[1].length; i++){
      $("body").append("<div><span class='header' style='color:red'>" + json[1][i] + "</span><br>" + json[2][i] + "</div><br>")
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>