javascript - このコードは機能しません。ループを使用して私の画像のサイズを取得しようとすると、最初の画像が表示されますが、他の画像は表示されません

Question

$j(document).ready(<script type="text/JavaScript">
  function getProps(){
    var imgwidth = [];
    var imgheight = [];
    var w, h;
    var width = document.getElementById('des').clientWidth;
    var height = document.getElementById('des').clientHeight;

    img = document.getElementById('des').getElementsByTagName('img').length;

    w = document.getElementById('des').getElementsByTagName('img');
    h = document.getElementById('des').getElementsByTagName('img');

    for ( count = 0; count < img; count++){

      imgwidth[count] = w.item(count).clientWidth;
      imgheight[count] = h.item(count).clientHeight;

    }
</script>);

Answer 1

私はこれがあなたが望むものだと思います、私はあなたのコードを少しリファクタリングしました：

function getProps()
{
    var imgwidth = [];
    var imgheight = [];

    var images = document.getElementById('des').getElementsByTagName('img');
    var count = images.length;

    for ( i = 0; i < count; i++)
    {

        imgwidth[i] = images[i].clientWidth;

        imgheight[i] = images[i].clientHeight;

    }

    console.log(imgwidth);
    console.log(imgheight);
}

$(document).ready(function()
{
    getProps()
});​

これを実証するためにjsfiddleを設定しました：http：//jsfiddle.net/JbpdW/

編集

jQuery（明らかに行うこと）を使用する場合は、次を使用してそのプロセスを少し単純化できます。

$("#des img").each(function(i)
{
    imgwidth[i] = this.clientWidth;
    imgheight[i] = this.clientHeight;
});

Answer 2

jqueryでは非常に短いです：

$j(function() {

  var result=$j.map($('#des img'),function(el,i) {
    var $el=$j(el); //optimize 
    return {width:$el.width(),height:$el.height()};
  });
  console.log(result);

});

2つの変数の代わりにオブジェクトの配列を使用したことに注意してください。2つの変数よりも1つの変数を使用する方が簡単です:) http://jsbin.com/uzikeh/2/edit