jQuery 使用 for 循环附加多个克隆的 DOM 对象答案

【问题标题】：jQuery appending multiple cloned DOM objects using a for loopjQuery 使用 for 循环附加多个克隆的 DOM 对象
【发布时间】：2015-04-24 11:22:58
【问题描述】：

我正在尝试制作一个简单的购物车，该购物车使用 JSON 文件从另一个页面中提取购物车对象。但是，当我开始将克隆的 DOM 对象附加到产品列表 div 的过程时，它只会附加循环中的最后一个对象，实际上会在最终迭代之前覆盖所有对象。

$('document').ready(function(){
    var cartArray = JSON.parse(localStorage.getItem("cart"));
    console.log(cartArray);
    parseData(cartArray);
})

    function parseData(item){

        // grab a clone of the aside
        $copy = $('.cart-selection').clone();

        //loop through and append a clone with modified JSON information for each item in the cart array
        for(i=0; i<item.length; i++){
            console.log(i);
            $('h2', $copy).html(item[i].name);
            $('img', $copy).attr("src", item[i].url);
            $copy.appendTo($('product-list'));
        }           
    }

我已经使用 .append 和 .appendTo 尝试了几种不同的变体，但都没有成功。任何帮助将不胜感激。

【问题讨论】：

我们可以看看你的json
你必须在循环内创建 $copy
确实如此。 $copy 应该在里面

标签： javascript jquery json

【解决方案1】：

您应该在循环内创建另一个克隆副本。
这个想法是创建元素的“原型”，然后为循环中的每个项目创建该原型的副本：

    // grab a clone of the aside
    $clone= $('.cart-selection').clone();

    //loop through and append a clone with modified JSON information for each item in the cart array
    for(i=0; i<item.length; i++){

        // create a copy of the clone
        $copy = $clone.clone();  

        console.log(i);
        $('h2', $copy).html(item[i].name);
        $('img', $copy).attr("src", item[i].url);
        $copy.appendTo($('product-list'));
    }

【讨论】：

将 $copy 放入循环后，它现在以指数方式生成我克隆的 DOM 元素。例如。对于 3 个项目的数组，它会生成 7 个 DOM 副本。
我已经编辑了我的答案。请检查这是否适合您。

【解决方案2】：

我猜 product-list 是类名或 ID 什么的？

$copy.appendTo($('product-list')); <--

如果是这样，您可能需要使用 .product-list 或 #product-list

【讨论】：

你是对的，它是一个类名。错过了那个。谢谢！ @Dr.Molle 我将 $copy 放入循环中，现在它以指数方式生成克隆的 DOM 元素。

【解决方案3】：

您需要在循环中创建克隆，否则您将只创建目标元素的一个克隆，并且您只是在循环中更改其内容

$('document').ready(function () {
    var cartArray = JSON.parse(localStorage.getItem("cart"));
    console.log(cartArray);
    parseData(cartArray);
})

function parseData(item) {
    //loop through and append a clone with modified JSON information for each item in the cart array
    for (i = 0; i < item.length; i++) {

        // grab a clone of the aside, need to do in the loop because for each item in the loop we need a new element
        //also should clone only the first instance of the cart-selection else in each iteration you will get multiple elements
        var $copy = $('.cart-selection').eq(0).clone();

        console.log(i);
        $('h2', $copy).html(item[i].name);
        $('img', $copy).attr("src", item[i].url);
        //need to fix the selector here, may be you need a class selector if product-list is a class
        $copy.appendTo($('.product-list'));
    }
}

演示：Fiddle

【讨论】：

这也很有帮助。希望我可以在收到的两个答案旁边打勾。谢谢！