jQuery каждый цикл останавливается после первого экземпляра класса

Question

Итак, я написал код для равномерного распределения изображений в горизонтальном div, сохраняя при этом их высоты одинаковыми, и, похоже, он работает хорошо, за исключением того, что он изменяет размер первого экземпляра класс горизонтально, а затем останавливается. Если я снова запустил код вручную в консоли инспектора хрома, он изменит размер следующего, но не на загрузку страницы.

JS выглядит следующим образом:

$('.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; 
    }); 

}); 

Вот является JSFiddle на основе того, что было любезно предоставлено lshettyl с моим кодом (игнорировать странную HTML скобку, они просто исправить пробельный вопрос) http://jsfiddle.net/rck79c1L/1/

Хорошо, так что это работает, и, как отмечено в комментарии, проблема заключается не в том, чтобы каждый из них не зацикливался, а неправильно искажал естественную ширину/высоту изображений.

И, кажется, были зафиксированы изменения

$(document).ready(function() 

в

$(window).load(function() 

Answer 1

Как указано в комментариях, $.each(heights,function(){sum+=parseFloat(this) || 0;}); имеет ошибку, а также это each является излишним, поскольку сумма может быть сделано в ваш второй each.

Вам не нужно преобразовывать объект изображения в объект jQuery, а затем обратно в объект изображения, чтобы получить его свойство. Это просто бессмысленно обзорные экскурсии =>$(img).get(0).naturalWidth

$('.horizontal').each => Вам не нужно each здесь, как вы могли бы просто сделать $('.horizontal img')

Вот ваш код, упрощена с уменьшенными each петель.

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) + "%" 
    }); 
}); 

Это a demo для вышеуказанных.

Answer 2

Так что в стороне от беспорядочного кода проблема оказалась естественнойHight/naturalWidth иногда сообщается как 0 (иногда правильно). Это привело к делению на нуль в коде, и поэтому ничего не происходит.

Изменение старт:

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

, кажется, исправили проблему.