使用append,克隆循环jquery

时间:2017-02-11 18:50:49

标签: javascript jquery loops append clone

我试图用for循环创建一些div。我使用.append()和.clone方法,但div的顺序是错误的。即使我在循环之前创建了div,在index.html中也会在最后一个div(类news3)之后生成第一个div(类news0),它应该是最后一个。我该如何解决这个问题?

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

screenshot

1 个答案:

答案 0 :(得分:0)

由于javascript for循环的异步性质,因此divs的顺序不合适。您可以做的是在jquery中使用$.each函数synchronous,因此会为您提供所需的输出

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

  })

}