Javascript jQuery在类的第一个实例之后停止每个循环

因此，我编写了一些代码，在水平div中均匀地分布图像，同时保持其高度一致，这似乎工作得很好，只是它将类的第一个实例调整为水平大小，然后停止。如果我在chrome inspector控制台中再次手动运行代码，它会调整下一个代码的大小，但不会在页面加载时调整

详情如下:

$('.horizontal').each(function( i, div ){

  var heights = [];
  var sum = 0;
  var count = 0;

  $(div).find('img').each(function( j, img){
    heights.push($(img).get(0).naturalWidth / $(img).get(0).naturalHeight);
  });

  $.each(heights,function(){sum+=parseFloat(this) || 0;});

  $(div).find('img').each(function( k, img){
    $(img).css( 'width', heights[count] * ( 100 / sum ) + "%");
    count += 1;
  });

});

这里是一个JSFIDLE，它基于lshettyl在我的代码中提供的内容（忽略奇怪的html括号，它们只是为了解决空白问题）

好的，这是可行的，正如评论中提到的，问题不是每个图像都没有循环，而是对图像的自然宽度/高度的误报

而且似乎已经被改变了

$(document).ready(function()

到

---

正如注释中指出的，

$.each（heights，function（）{sum+=parseFloat（this）| | 0；}）

有一个错误，而且该

每个

都是多余的，因为可以在第二个

每个

本身中进行求和

您不需要将图像对象转换为jQuery对象，然后再转换回图像对象来获取其属性。这只是毫无意义的往返=>

$（img）.get（0）.naturalWidth

$（'.horizontal'）。每个

=>此处不需要一个

每个

，因为您只需执行

$（'.horizontal img'）

这是您的代码，使用简化的

每个
循环进行简化

var heights = [];
var sum = 0;
var $images = $('.horizontal img');

$images.each(function( i, img ){

    var height = img.naturalWidth / img.naturalHeight || 0;
    sum += parseFloat(height);
    heights.push(height);
});

$images.each(function( k, img ) {
    $(img).css({
        'width': (heights[k] * ( 100 / sum )).toFixed(2) + "%"
    });
});

下面是上面的内容。
因此，除了混乱的代码之外，问题是naturalHeight/naturalWidth有时被报告为0（有时是正确的）。这导致代码被零除，因此什么也没有发生

将开始更改为：

$(window).load(function(){...

似乎已经解决了这个问题。
$。每个（高度，函数（索引，val）{sum+=parseFloat（val）| | 0；}）？为什么要在上一个集合中使用高度[k-1]而不是高度[k]？检查您循环使用的每个集合：
console.log（$（'.horizontal'）.length）
，
console.log（$（div）.find（$（img'）.length）
，
console.log（heights.length）
和
console.log（$（div）.find（$（img'））
-它们都是您所期望的吗？@tusargupta-在jQuery中是
这个
和
val
不一样吗？
每个
函数都有两个参数1。（元素的）索引2。对象（元素引用）仍然是新的，大部分代码是从web上的各种示例拼凑而成的。你的看起来好多了，适用于类的所有实例，但是没有正确地调整图像的大小。在您的示例中，有两个大小相同的图像，因此宽度应设置为50%，但它们都设置为16.67%。这可能是一个数学错误，我应该能够发现，一旦我的头周围的变化。这段代码最终分配的宽度，好像所有的图像在同一行。然而，它应该只是同一行上每个div中的图像。不太清楚，请在小提琴中设置一个示例，这样可以帮助我们实时调试。当然，在这种情况下，您需要对每个div进行检查，并根据您的需要更正数学。因此，代码为每个图像提供了16.67%（1/6）的宽度。应该是每幅图像的3个批次为50%，因为每行有2个。那么，你的公式是图像数量/100%？
$(window).load(function(){...