jQuery追加覆盖最后一个元素

Question

我正在尝试动态创建一个列表，我添加了一个克隆的div。

首先，在html

中添加div

<main>
    <div class="clone_me">
        ...
    </div>
</main>

在jquery的

中，我克隆div，然后将其从页面中删除。然后，在keyup上，我使用AJAX调用进行一些搜索并返回20个结果。我可以看到所有20个结果。

$(function(){
    var clone = $('.clone_me').clone();
    $('.clone_me').remove;
    $(document).on('keyup', 'input', function() {
        var variable = $(this).val();
        $.ajax({
            url: "link/to/script.php",
            type:"POST",
            dataType: "json",
            data {variable:variable},
            success: function(data){ 
                var json = JSON.parse(data);
                $.each(json.arrayVal, function() {
                    var value = this.value;
                    clone.find('.details').text(value);
                    $('main').append(clone);
                }
            }
        });
    });
});

现在，ajax调用返回20行(我可以在控制台中读取它们，所以我知道它正在工作[是的，当然这只是虚拟信息，但我知道它工作])。

当我追加克隆时，由于某种原因，它会覆盖它之前的一个，所以最终不是得到20个克隆，而是得到一个具有AJAX调用的最后一个值的克隆。

我如何得到所有20个克隆被追加和显示?

Answer 1

哈哈，你需要"克隆"克隆变量，像这样:

$(function(){
    var clone = $('.clone_me').clone();
    $('.clone_me').remove();
    $(document).on('keyup', 'input', function() {
        var variable = $(this).val();
        $.ajax({
            url: "link/to/script.php",
            type:"POST",
            dataType: "json",
            data {variable:variable},
            success: function(data){ 
                var json = JSON.parse(data);
                $.each(json.arrayVal, function() {
                    var value = this.value;
                    var newclone = clone.clone().find('.details').text(value);
                    $('main').append(newclone );
                }
            }
        });
    });
});