jQueryを使用してクローンを作成し、サイズを変更した後のイメージのサイズを取得する

Question

イメージが表示される前に複製され、サイズが変更されたイメージの幅を取得するjQueryコードを作成しようとしています。 DOMに追加された幅はここで常に0

(function($){ 
    var $images = createDiv(), 
     totalWidth = 0; 

    //loop through a list of images 
    $("#images > li > img").each(function(){ 
     var $this = $(this), 
      $img = $this.clone(); //createa duplicate of the images 

     $img.height(100); //resize each duplicate to a set height 

     totalWidth += $img.width(); //always equals zero 

     //this always results in 0 too 
     //totalWidth += $img.get(0).clientWidth; 

     //add the cloned image to the div 
     $images.append($img); 

     //remove full sized image to reattach later 
     $this.remove(); 
    }); 

    $images.hide(); 

    $("body").append($images); 

    $("#show").on('click',function(){ 
     $images.show(); 
    }); 

    function createDiv(){ 
     return $('<div id="imgs"></div>'); 
    } 
}(jQuery)); 

ある完全な例のバイオリンです：彼らが追加される前に、私はリサイズ画像の幅を組合わせた合計を取得するにはどうすればよいhttp://jsfiddle.net/bittersweetryan/9c3SH/2/

DOM？

Answer 1

最初に画像をDOMに追加する必要があります.DOMには画像が添付されています.DOMノードには物理的なプロパティはありません。width属性があります。

(function($){ 
    var $images = createDiv(), 
     totalWidth = 0; 

    //loop through a list of images 
    $("#images > li > img").each(function(){ 
     var $this = $(this), 
      $img = $this.clone(); //createa duplicate of the images 

     $img.height(100); //resize each duplicate to a set height 

     /* the call to css() is to make sure the created image isn't visible 
      in the window. */ 

     $img.css(
      { 
       'position': 'absolute', 
       'left' : -10000 + 'px', 
      }); 

     /* appending the element to the body */ 

     $img.appendTo($('body')); 

     totalWidth += $img.width(); //always equals zero 
     //this always results in 0 too 
     //totalWidth += $img.get(0).clientWidth; 


     /* just to be sure... */ 

     console.log(totalWidth); 

     /* *moving* the created image from its previous place off-screen, 
      and removing also the 'position: absolute;' so that it's visible */ 
     $img.css({'position' : 'static'}).appendTo($images); 

     //remove full sized image to reattach later 
     $this.remove(); 
    }); 

    $images.hide(); 

    $("body").append($images); 


    $("#show").on('click',function(){ 
     $images.show(); 
    }); 

    function createDiv(){ 
     return $('<div id="imgs"></div>'); 
    } 
}(jQuery)); 

JS Fiddle demo：そうは言っても、私はこれを示唆しています。