Javascript 使用jquery使函数在具有相同类的所有div中工作

我有一个响应div（.container），其中包含一行嵌套的div（.imgWrapper），每个div都包含一个映像（.imgWrapper img）。以下代码的目的是使所有图像具有相同的高度，同时仍然适合容器中的一行，尽管所有图像彼此的比例不同（即横向和纵向）

如果类为“.container”的div只有一个，这一切都非常有效。但是，只要我添加了具有相同类的div，该函数就会应用于所有图像，而不是每个“.container”div中的图像。如何将该函数一次应用于每个“.container”div

---

这里有一个JSFIDE示例：

不是100%确定您想要实现什么，但我认为是这样的

$(window).bind("load", function() {

  var totalHeight = 100;
  $('.container').each(function(){

    var totalWidth = 1;
    $(this).children().filter('.imgWrapper').each(function(){
        totalWidth += $(this).outerWidth();
    });

    var containerWidth = $(this).width();
    var ratio = totalWidth / totalHeight;
    var containerHeight = containerWidth / ratio;

    $(this).css('height',containerHeight + 'px');

    var newTotalWidth = 0;
    $(this).children().filter('.imgWrapper').each(function(){
      $(this).children('img').css('height',containerHeight + 'px');
      newTotalWidth += $(this).outerWidth();
    });

    $(this).css('width',newTotalWidth + 'px');
  });
});

---

很好。我复制并粘贴了你的container div，我添加了一堆随机图像，效果很好。你能把问题本身做一个JSFIDLE链接吗？是的，我也做了同样的事情，效果很好。检查一下对不起，我弄错了。出于某种原因，jsfiddle没有说明这个问题。这是应该的：但问题是：-您会注意到图像已经缩小，因为所有图像的组合宽度都在计算中，而不仅仅是每个“.container”中的图像。anwser有帮助吗？

$(window).bind("load", function() {

  var totalHeight = 100;
  $('.container').each(function(){

    var totalWidth = 1;
    $(this).children().filter('.imgWrapper').each(function(){
        totalWidth += $(this).outerWidth();
    });

    var containerWidth = $(this).width();
    var ratio = totalWidth / totalHeight;
    var containerHeight = containerWidth / ratio;

    $(this).css('height',containerHeight + 'px');

    var newTotalWidth = 0;
    $(this).children().filter('.imgWrapper').each(function(){
      $(this).children('img').css('height',containerHeight + 'px');
      newTotalWidth += $(this).outerWidth();
    });

    $(this).css('width',newTotalWidth + 'px');
  });
});