Utiliser append, cloner dans la boucle jquery

Question

J'essaye de créer quelques divs avec la boucle for. J'utilise les méthodes .append() et .clone mais l'ordre de div est faux. Même lorsque j'ai créé div before loop, dans index.html, le premier div (class news0) est généré après le dernier div (class news3) qui devrait être le dernier. Comment puis-je resoudre ceci?

$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

L'ordre du divs dans votre cas ne convient pas en raison de la nature asynchrone du javascript pour la boucle. ce que vous pouvez faire est d'utiliser $.each fonction jquery qui est synchronous et donc vous donnera la sortie désirée

Votre fonction avec boucle $.each() sera comme

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

    }) 

}