jQuery - 方法问题 - 不确定如何继续

Question

我对标题名称表示道歉 - 我不知道如何标记这个标题。

我正试图平衡每一行中的一组物品的高度。

（连续显示三项）

首先。）每行技术上有4个项目。 但是我正在进行A / B测试以显示更大的项目 （所以3列而不是4列） - 因此我需要计算每一行的前3项。

我尝试使用return false打破每个函数。只是意识到如果每个.row有4个项目 - 这对我这样做是没有帮助的。

注意，第一行的第四项在技术上是第二行的第一项，我不知道如何解决这个问题。

非常感谢任何帮助。

感谢。

最终将它打破，因为现在有三个项目的实际行具有不同的高度：

[更新了我的代码以匹配Alon Eitan的] 但是现在我在最后一行收到了这个：

我注意到第一排也不是相同的高度 - 它工作正常 - 我只是担心如果它发生在另一个位置它会破坏布局。

请参阅下面我正在使用的代码：

 <script>
  $( document ).ready(function() {

    // Select and loop the container element of the elements you want to equalise
    $('div.row').each(function(){  

var highestBox = 0;
var lastIndex = 0;
$('div.result.product').each(function(index){
    if( index > 1 && index  % 3 == 0 ) {
        $('div.result.product').slice(index, -3).height(highestBox);
        highestBox = 0;
        lastIndex = index;
    }
    if($(this).height() > highestBox) {
        highestBox = $(this).height(); 
    }
});

if( highestBox > 0 && index + 1 < $('div.result.product').length ) {
    // make sure that if the last row contain less than 3 items, that that those items will also get the same height
    $('div.result.product').slice(lastIndex).height(highestBox);
} 
    }); 
 }); 


</script>

Answer 1

如果你想＆＃34;重新组合＆＃34;这些项目，然后您需要全部选择它们，然后您需要确定您正在迭代新行中的元素。例如：

var highestBox = 0;
var lastIndex = 0;
$('div.result.product').each(function(index){
    if($(this).height() > highestBox) {
        highestBox = $(this).outerHeight(); 
    }

    if( index > 1 && index  % 3 == 0 ) {
        $('div.result.product').slice(index-3, index).outerHeight(highestBox);
        highestBox = 0;
        lastIndex = index;
    }
});

if( highestBox > 0 && lastIndex + 1 < $('div.result.product').length ) {
    // make sure that if the last row contain less than 3 items, that that those items will also get the same height
    $('div.result.product').slice(lastIndex).outerHeight(highestBox);
}