JQuery переменная в функции странное поведение

Question

Я работал над скриптом, который изменяет размер изображений в соответствии с размером контейнера. Я записал следующий код:

$(function() { 
    $('.postbody .content img').each(function() { 
     var containerWidth = $(this).parent().width(); 
     if ($(this).width() > containerWidth) { 
      $(this).width(containerWidth); 
      $(this).wrap('<a href="' + $(this).attr('src') + '" target="_blank"></a>'); 
     } 
    }); 
}); 

Но он работал только для первого элемента в цикле. С моим предыдущим опытом с вопросами после назначения методов JQuery переменного я изменил код немного:

$(function(){ 
    $('.postbody .content img').each(function() { 
     if ($(this).width() > $(this).parent().width()) { 
      $(this).width($(this).parent().width()); 
      $(this).wrap('<a href="'+$(this).attr('src')+'" target="_blank"></a>'); 
     } 
    }); 
}); 

И теперь он работает отлично. Но я не могу понять, как это сделать. Должна ли переменная containerWidth получать новое значение при каждом вызове функции каждым циклом?

EDIT: Обратите внимание, что все контейнеры равного размера.

Answer 1

Попробуйте это,

$(function() { 
    $('.postbody .content').each(function() { 
     var containerWidth = $(this).width(); 
     var img = $(this).find("img"); 
     if (img.width() > containerWidth) { 
      img.width(containerWidth); 
      img.wrap('<a href="' + img.attr('src') + '" target="_blank"></a>'); 
     } 
    }); 
}); 

Или Вы можете выполнить ту же операцию просто с помощью CSS

просто сделать IMG тег макс ширину до 100%

Ex.

img { 
    max-width: 100%; 
}