Почему эта функция работает неправильно

Question

У меня есть эта функция для печати размеров изображения всех <img>, имеющих атрибут [proto].

Когда я пытаюсь выполнить функцию с помощью этого метода each, он возвращает функцию.

Какая ошибка?

function size(){ 
    var $img = $('img[proto]'); 
    $($img).each(function(){ 
     var height = $(this).height; 
     var width = $(this).width; 
     $(this).parent().find('p').remove(); 
     $(this).parent().append('<p class="size">' + width + '-' + height + '</p>'); 

    }); 
} 
size(); 

Answer 1

Эти функции не свойства, высота и ширина:

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

Answer 2

1. Изменение вы элементы declartion. Потому что вы делаете это так: $($('img[proto]')). Таким образом, вы дважды добавляете свои элементы в jQuery.
2. width и height - это функции, а не свойства. Поэтому вам нужно добавить скобки.

---

function size() { 
    $('img[proto]').each(function() { 
     var height = $(this).height(), 
      width = $(this).width(); 
     $(this).parent().find('p').remove(); 
     $(this).parent().append('<p class="size">' + width + '-' + height + '</p>'); 
    }); 
} 

size(); 

---

Я бы даже предпочел, чтобы получить только элементы, которые необходимы один раз. То, как вы это делали, вносит this четыре раза в объект jQuery и два раза ищет для родителя. Производительность может быть сохранена.

var element = $(this), 
    parent = element.parent(), 
    height = element.height(), 
    width = element.width(); 

parent.find('p').remove(); 
parent.append('<p class="size">' + width + '-' + height + '</p>'); 

---

И если вы хотите, чтобы выполнить функцию непосредственно, вы можете использовать IIFE или просто удалить функцию вокруг и выполнить его непосредственно.

(function() { 
    $('img[proto]').each(function() { 
     // ... 
    }); 
})();