Modification d'un élément cloné et réinsertion dans dom-jquery

Question

//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 

Answer 1

Vous souhaitez simplement cloner l'élément à chaque itération. Un objet DOM n'est pas un objet normal JS (Eh bien, il est, mais il a plus à ce qui est la raison pour laquelle vous devez utiliser createElement dans JS brut pour créer un nouveau):

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

Pourquoi votre code a échoué, Bien que vous "étendiez" un objet vide à chaque itération, il faisait toujours référence au même noeud DOM. Vous avez continué à modifier sa valeur et à l'ajouter à #target. En outre, la façon dont fonctionne append déplace réellement l'objet, de sorte que vous n'obteniez pas d'objets en double.