jquery - 找到最大的图像

Question

我使用以下命令在 .content 中查找图像，并将其宽度应用于 .project 父宽度。

    $('.content').find('img').each(function () {
         var $this = $(this), width = $this.width();
         {
            $(this).closest('.project').css("width", width);
        }
    });

我的问题是，它在 .content 中找不到最大图像，有时会应用小于最大图像的宽度，并且会产生问题我的布局。

任何帮助都会很棒。谢谢。

<小时/>

编辑

哎呀，细节是错误的，答案很棒!我只需要应用父 project div 的最大宽度。

以 Sudhir 的答案为基础。

这不起作用，它应该起作用吗？

 $(document).ready(function() {
var max_width = 0;
$('.content').find('img').each(function(){
        var this_width = $(this).width();
        if (this_width > max_width) max_width = this_width;
});
$(this).closest('.project').css('width', max_width + 'px');
});

布局示例。有很多项目。

<div class="container">

    <div class="project">
        <div class="content">
            <img src="small.jpg"  height="100" width="100" />
            <img src="large.jpg"  height="400" width="600" />
            <img src="medium.jpg"  height="400" width="600" />

        </div>

        <div class="meta">Other content here.

        </div>
    </div>



    <div class="project">
        <div class="content">
            <img src="small.jpg"  height="100" width="100" />
            <img src="large.jpg"  height="400" width="600" />

       </div>

        <div class="meta">Other content here.

        </div>
    </div>

Answer 1

您无法在文档就绪事件中执行此操作。您必须在窗口加载时执行此操作，因为必须加载所有图像才能获取尺寸。

$(window).load(function(){
    $('.project').each(function(){
        var maxWidth = 0;
        $(this).find('.content img').each(function(){
            var w = $(this).width();
            if (w > maxWidth) { 
              maxWidth = w;
            }
        });
        if (maxWidth) {
          $(this).css({width:maxWidth});
        }
    });       
});