Question

我使用以下内容在.content中查找图片，并将其宽度应用于.project父级宽度。

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

我的问题是它找不到.content中的最大图像，有时会应用小于最大图像的宽度，并且会导致布局出现问题。< / p>

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

编辑

Woops，细节错了，答案很棒！我只需要应用父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});
        }
    });       
});

Answer 2

你的意思是这样的：


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

希望有所帮助

Answer 3

要使用此函数迭代，获得最大宽度：

var getMaxWidth = function ($elms) {
    var maxWidth = 0;
    $elms.each(function () {
        var width = $(this).width();
        if (width > maxWidth) {
            maxWidth = width;
        }
    });
    return maxWidth;
};

Answer 4

jQuery plugin authoring guide中的示例与您正在寻找的内容非常相似：

$.fn.maxWidth = function() {
  var max = 0;

  this.each(function() {
    max = Math.max(max, $(this).width());
  });

  return max;
};

像这样使用它：

var maxWidth = $('.content img').maxWidth();

Answer 5

这有效，我不知道你是否希望它超级压缩：

function findmax() { 
    max=Math.max(max,parseInt($(this).css('width'))); }
function sum() {
    max=0;
    $(this).children('img').each(findmax);
    $(this).parent().css('width',max+'px'); }
var max;
$('.content').each(sum);

Answer 6

您循环浏览所有图像，因此容器的宽度将始终与上一张图像相同。您应检查当前图像的宽度，并将其与该点找到的最宽图像的宽度进行比较，并相应地调整宽度。

修改

试试这个：

$('.content').each(function () { var max_width = 0; $(this).find('img').each(function () { if ($(this).width() > max_width) { max_width = $(this).width(); } }); $(this).width(max_width); });

使用嵌套的$(this)疯狂，但我认为它应该可行。

找到最大的图像

6 个答案: