jQuery, добавляющий несколько клонированных объектов DOM с использованием цикла for

Question

Я пытаюсь создать простую корзину покупок, которая тянет объекты корзины с другой страницы с помощью файла 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, не повезло. Любая помощь будет принята с благодарностью.

Answer 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')); 
    }  

Answer 2

Я думаю, продукт-список является именем класса или ID-то?

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

если да, то вам, возможно, придется использовать .product-лист или # продукт-лист

Answer 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