jquery - 将同级 DIV 设置为相等高度(最高)

Question

我正在尝试将配对的 div 设置为相同的高度。

<div class="item ">
Some text
</div>
<div class="item right">
Some text
</div>
<div class="item ">
Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item ">
Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text
</div>

CSS

.item{width: 45%;float: left;position: relative;border: 1px solid #000;clear:left;}
.item.right{float:right;clear:right;}

我正在使用 jQuery

$('.item.right').prev().each(function() {
    leftheight = $(this).height();
    rightheight = $(this).next().height();      
    if(leftheight > rightheight){
        $(this).next().height(leftheight);
    }else{
        $(this).height(rightheight);
    }               
});

这似乎不起作用，我不明白为什么。

我有两列布局，其中 div 有一个引脚线边框，因此当它们高度不同时非常明显。 “正确的类别”将项目 float 到右侧。我只希望这些对具有相同的高度，因为它们会形成一排。我不想使用表格(CSS 或其他)，因为布局对于移动设备来说是动态的(它们形成单个列)。

Answer 1

您可以使用map()将div左/右元素的高度获取到数组中，然后使用Math.max在数组上获得最高的值，并将该值用于它们两个。试试这个:

$('.item.right').each(function() {
    var $divs = $(this).add($(this).prev('.item'));
    var tallestHeight = $divs.map(function(i, el) {
        return $(el).height();
    }).get();
    $divs.height(Math.max.apply(this, tallestHeight));
});

Example fiddle