jQuery UI一行中的可排序项应具有相同的高度

Question

我使用jQuery UI Sortable来排序teasers。问题是，有时候戏弄者包含不同数量的文本。 （红色是文本。）因此，如果出现多行预告： 但我想要的是这个： 预告片应该与该行中最高的预告片具有相同的高度。没有选择给他们所有相同的高度。每行的最大预告数总是3。

有没有比测量每行最高预告片高度更简单的方法，并在每次排序后使用jQuery调整其他预告片的高度？

Answer 1

$(function () {
    $('li').addClass('teaser');
    $('.sortable').sortable();
    $('#fixHeights').click(function () {
        var heights = [];
        $('.teaser').each(function () {
            heights.push($(this).height());
        });
        heights.sort();
        var tallest = heights.pop();
        alert(tallest); // optional
        $('.teaser').each(function () {
            $(this).height(tallest);
        })
    });
});

jsFiddle demo!

  

是否有比测量最高预告片高度更简单的方法   每行并用jQuery调整其他teasers的高度   每种？

简单地说，不。

Answer 2

根据DevIshOnes的回答，这是我的解决方案：

var heights = [];
var tallest = [];
$('.teaser:not(.ui-sortable-placeholder)').each(function () {
  $(this).height('auto');
  heights.push($(this).height());
});
while (heights.length != 0) {
  var line = heights.splice(0,3);
  line.sort(function(a,b){return b-a});
  tallest.push(line[0]);
}
$('.teaser').each(function (i) {
  $(this).height(tallest[Math.floor(i/3)]);
});

要获得每行中最高的预告片，我会生成tallest数组，之后我会使用tallest[Math.floor(i/3)]为每个预告片获取正确的高度值。