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行（我可以在控制台中读取它们，所以我知道它正在工作[是的，当然它只是虚拟信息，但我知道它有效] ）。

当我附加克隆时，由于某种原因它会覆盖它之前的那个，所以我最终得到的是一个克隆，其中包含来自AJAX调用的最后一个值。

如何将所有20个克隆添加到并显示？

Answer 1

大声笑你需要“克隆”克隆var，如下所示：

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

jQuery追加覆盖最后一个元素

1 个答案: