appendを使うと、ループjqueryのクローン

Question

私はforループでいくつかのdivを作成しようとしています。私は.append（）と.cloneメソッドを使用していますが、divの順序は間違っています。 div前ループを作成したとしても、index.htmlの最初のdiv（クラスnews0）は最後のdiv（クラスnews3）の後に生成されます。これをどうすれば解決できますか？

$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の非同期の性質のは適切ではありません。何を行うことができますことはsynchronousあるので、あなたに必要な出力

$.each()ループとあなたの関数は、この問題をsovleしない

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

    }) 

}