Jquery - получение размеров изображения в цикле .each?

Question

Я пытаюсь написать какой-нибудь код, который будет распечатывать размеры всех изображений, содержащихся в div, просто, как мне кажется, я не могу заставить его работатьМожет ли кто-нибудь указать на ошибки здесь?Спасибо!

$(document).ready(function() {

  var width = 0;
  var height = 0;
  var hello = "hello";

  $('#imagebox img').each(function(){

    width = $(this).width;
    height = $(this).height;
    $('#main').append(hello);
    $('#main').append(width);
    $('#main').append(height);    
  });

});

Пример JSBin здесь

Answer 1

ширина и высота являются функциями.Попробуйте:

width = $(this).width();
height = $(this).height();

Answer 2

Я изменил вашу версию на

• используйте правильные методы для высоты и ширины

• прекратите повторный запрос DOM дляодни и те же элементы снова и снова

• прекратить вызывать добавление повторно

См. http://jsbin.com/ikoge5/15/edit

Answer 3

Это следует сделать после полной загрузки изображения.

Для этого можно поместить код в обработчик .load().

var main = $('#main');

$('#imagebox img').load(function(){
  var $th = $(this);
  width = $th.width();
  height = $th.height();
  main.append((hello + width) + height);   
});

или если вы хотите убедиться, что размеры изображения добавлены в правильном порядке, тогдаэто на window нагрузка.

$(window).load(function() {
    var main = $('#main');

    var vals = $('#imagebox img').map(function(){
      var $th = $(this);
      width = $th.width();
      height = $th.height();
      return (hello + width) + height;   
    }).get();

    main.append( vals.join('') );
});

Answer 4

Нет атрибутов widht и height.То, что вы можете сделать, это

width = $(this).css('width');

или

width = $(this).width();

и аналогично для высоты.