Question

我有3个.items_row div，每个包含4个.item，每个.item包含.item_img。我正在使用以下脚本查找每个.item_img中每个.item中最高的.items_row，并为最短的.item_img高度添加最下边距减去每个最短的高度。

$('.items_row').each(function(){
    var tallestimg = -1;
    $(this).children().each(function() {
        $(this).find('.item_img').each(function(i) {
            tallestimg = $(this).height() > tallestimg ? $(this).height() : tallestimg;
            if ($(this).height() < tallestimg) {
                $(this).css({ 'margin-bottom': tallestimg - $(this).height() });
            }
        });
    });
});

该脚本完全按照我的意愿工作，但是在最高.item_img div不在第一个.item div中的情况下，最短的div在它没有得到margin-bottom之前。例如，如果最高的.item_img div位于.item的第二个.items_row中，则其前面的.item_img会忽略margin-bottom。有什么想法吗？

Answer 1

您的解决方案不起作用，因为您没有为最高的图像设置边距底部。如果您的图像从最短到最高排序，则所有图像都将具有margin-bottom = 0。

首先应搜索最高的图像，然后再次遍历图像以应用所需的边距底部。

我认为这应该有效：

$('.items_row').each(function(){
    var tallestimg = -1;
    $(this).children().each(function() {
        $(this).find('.item_img').each(function(i) {
            tallestimg = $(this).height() > tallestimg ? $(this).height() : tallestimg;            
        });
    });

    $(this).children().each(function() {
        $(this).find('.item_img').each(function(i) {
            if ($(this).height() < tallestimg) {
                $(this).css({ 'margin-bottom': tallestimg - $(this).height() });
            }
        });
    });


});

Answer 2

试试这个：

$('.items_row').each(function() {
    var $rowItems = $('.items', this)

    // get the height of the tallest .item in the row
    var maxHeight = $rowItems.map(function(index, element) {
        return $(element).height();
    }).get();

    // apply the required margin-bottom to each .item
    $rowItems.each(function() {
        $(this).css({ 'margin-bottom': maxHeight - $(this).height() })
    });
});

Answer 3

首先获得最高的图像：

var max_height = Math.max.apply(
    null,
    $('.item_img').map(function(ix, el){ 
        return $(el).height(); 
    }).get()
)

然后应用保证金：

$('.item_img').each(function(){
    $(this).css({'margin-bottom': max_height - $(this).height()});
});

Answer 4

请参阅：http://jsfiddle.net/pPTkL/1/

$('.items_row').each(function() {
 var height= -1;
 $(this).find('.item_img').each(function() {
     height = Math.max(height, $(this).height()); 
 });

 $(this).find('.item_img').each(function() {
     $(this).css('margin-bottom',(height - $(this).height()));
 });
});

儿童div的每个短子女的保证金底部

4 个答案: