jquery - 在 jquery 中复制克隆元素

Question

我有一个输入，它有一些功能。在某些情况下，我收到一个包含预定义的输入的数组，然后我必须使用附加该输入列表那个数组。问题是只创建了一个输入字段。 fiddle

    $('.row input').click(function() {
        alert(0)
    })

    var data = $('#myList').clone(true);
    $('.row').remove()

    var list = ['car', 'axe', 'gold'];
    $.each(list, function(i, val) {
        $('#myList').prepend(data.find('input').val(val))
    })

注意:此外，附加到 input 的功能是在另一个 js 文件中的某处定义的，我无法更改它。它会破坏其他页面

Answer 1

您正在克隆 #myList 元素。它有一个input 后代。第一次迭代后，克隆的 div 没有任何 input 后代，因此下一个 find 调用返回一个空集合，并且 prepend 方法实际上不执行任何操作。一种选择是:

var $input = $('#myList').find('input').detach();
$('.row').remove();

var list = ['car', 'axe', 'gold'];
$.each(list, function (i, val) {
    $('#myList').prepend($input.clone(true).val(val));
});

上面的代码片段不是移动输入元素，而是克隆它并将克隆的元素添加到容器的前面。

编辑:您可以将元素集合传递给 .prepend() 方法。当您将节点传递给该方法时，它不会克隆并添加它们，它只会移动它们，并且节点不能是 2 个父元素的子元素，因此使用 .clone() 在这种情况下是必要的。这是原始代码中发生的情况:

var data = $('#myList').clone(true);
// ...
$.each(list, function (i, val) {
    console.log( 'index: ' + i + ', html: ' + data.html() );
    $('#myList').prepend(data.find('input').val(val))
});

记录的数据:

index: 0, html: 
    <div class="row">
        <input type="text">
    </div>
    <div>
        <button>add row</button>
    </div>

index: 1, html: 
    <div class="row">

    </div>
    <div>
        <button>add row</button>
    </div>

index: 2, html: 
    <div class="row">

    </div>
    <div>
        <button>add row</button>
    </div>

正如您所看到的，在第一次迭代之后，包装器元素不再具有任何 input 后代。拥有 1 个或多个元素不会影响结果。在第一次迭代中，find 方法返回的所有 input 后代都移动到目标元素中。