Question

因此，我编写了一些代码，将图像均匀地分布在水平div中，同时保持其高度均匀，并且它似乎运行良好，除了它将类的第一个实例调整为水平然后停止的事实。如果我在chrome检查器控制台中再次手动运行代码，则会调整下一个，但不会在页面加载时调整。

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;
  });

});

这是一个基于lshettyl和我的代码友好提供的JSFiddle（忽略奇怪的html括号，它们只是为了解决空白问题） http://jsfiddle.net/rck79c1L/1/

好的，所以这是有效的，并且正如评论中所指出的那样，问题不是每个都没有循环，而是误报了图像的自然宽度/高度。

似乎已经通过改变来修复

$(document).ready(function()

到

$(window).load(function()

Answer 1

正如评论中指出的那样，$.each(heights,function(){sum+=parseFloat(this) || 0;});有错误，而each也是多余的，因为总和可以在您的第二个each本身完成。

您不需要将图像对象转换为jQuery对象，然后返回图像对象以获取它的属性。它只是无意义的往返=＆gt; $(img).get(0).naturalWidth

$('.horizontal').each =＆gt;您不需要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。

jQuery每个循环在第一个类

1 个答案: