使用追加，在循环克隆jquery

Question

我想创建几个div for循环。我使用.append（）和.clone方法，但div的顺序是错误的。即使我在循环之前创建了div，在index.html第一个div（class news0）是在最后一个div（class news3）之后生成的，它应该是最后一个div。我该如何解决这个问题？

$news.ready(function() { 
     var query = []; 
     console.log(query); 
     $.ajax({ 
      url: baseUri + "news", 
      data: {q: query}, 
      success: showNews 
     }); 
     return false; 
    }); 

    function showNews(response) { 
     var news = response[0]; 
     console.log(news); 
     $news.append($div); 
     $div.attr('class', 'news' + 0); 
     $div.append($h1); 
     $div.append($h2); 
     $div.append($h3); 
     $div.append($p); 

     $h1.html(news.title); 
     $h2.html(news.author); 
     $h3.html(news.date); 
     $p.html(news.body); 

     for (var i = 1; i < response.length; i++) { 
      news = response[i]; 

      $news.append($div.clone()); 
      $div.attr('class', 'news' + i); 
      $div.append($h1); 
      $div.append($h2); 
      $div.append($h3); 
      $div.append($p); 

      $h1.html(news.title); 
      $h2.html(news.author); 
      $h3.html(news.date); 
      $p.html(news.body); 
     } 
    } 

Answer 1

你的情况divs的顺序是由于JavaScript的for循环的异步特性不恰当的。你可以做的是使用jQuery的是synchronous$.each功能，因此会给你所需的输出

您与$.each()循环功能会像

function showNews(response) { 
    var news = response[0]; 
    console.log(news); 
    $news.append($div); 
    $div.attr('class', 'news' + 0); 
    $div.append($h1); 
    $div.append($h2); 
    $div.append($h3); 
    $div.append($p); 

    $h1.html(news.title); 
    $h2.html(news.author); 
    $h3.html(news.date); 
    $p.html(news.body); 

    $.each(reponse, function(index, news){ 
     if(index > 0) { 
     $news.append($div.clone()); 
     $div.attr('class', 'news' + i); 
     $div.append($h1); 
     $div.append($h2); 
     $div.append($h3); 
     $div.append($p); 

     $h1.html(news.title); 
     $h2.html(news.author); 
     $h3.html(news.date); 
     $p.html(news.body); 
     } 

    }) 

}