代码之家 › 专栏 › 技术社区 › Praveen Prasad

修改克隆的元素并在dom-jquery中重新插入

jquery

Praveen Prasad · 技术社区 · 15 年前

    //dom    

    <div id='toBeCloned'><span>Some name</span></div>
    <div id='targetElm'></div>

    //js
        $(function () {
            //creating a clone
            var _clone = $('#toBeCloned').clone(true);
    // target element
            var _target = $('#targetElm');

    //now target element is to be filled with cloned element with data of span changed
            var _someData = [1, 2, 3, 4];

    //loop through data
            $.each(_someData, function (i, data) {
                var _newElm = {};
                $.extend(_newElm, _clone);//copy cloned to  new Elm
                _newElm.find('span').html(data); //edit content of span
                alert('p'); // alert added to show that append in next line inspite of adding new element to dom just updating the previous one
                _target.append(_newElm);//update target
            });
        });


expected Result:
1 2 3 4
resut iam getting is
4

1 回复 | 直到 15 年前

Doug Neiner 15 年前

您只需要在每次迭代中克隆元素。dom对象不是普通的js对象 createElement 在raw js中创建一个新的:

$(function () {
    // element to be cloned
    var _clone_me = $('#toBeCloned');
    // target element
    var _target = $('#targetElm');

    //now target element is to be filled with cloned element with data of span changed
    var _someData = [1, 2, 3, 4];

    //loop through data
    $.each(_someData, function (i, data) {
        var _newElm = _clone_me.clone(true); // clone copy
        _newElm.find('span').html(data);  //edit content of span
        _target.append(_newElm); //update target
    });
});

代码失败的原因是,尽管您在每次迭代中“扩展”了一个空对象,但它仍然总是引用 相同的 DOM节点。你不断地改变它的值,并把它附加到 #target . 另外,还有 append works实际上会移动对象,所以不会得到重复的对象。