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);

});

请注意，我使用对象数组而不是两个变量，使用一个变量比使用两个变量更容易:) http://jsbin.com/uzikeh/2/edit