javascript - 4 个元素的高度相等

Question

我想修改我的 JS 一次只影响 4 个元素。我想让它找到 .prodbox 的前 4 个实例，然后根据这 4 个实例的高度对它们进行标准化。然后，执行接下来的 4 个 .prodbox 实例，并对其进行规范化。等等等等。

基本上，我在一行中有“产品框”(.prodbox)，每行有 4 个产品。我想让他们用这个 JS 变得漂亮和统一。但我只希望它一次影响 1 行，因此每行都与自身内联。

这是为了让产品名称较大的产品与产品名称较小的产品在同一行上，看起来可以很好地对齐。

例如:http://i.imgur.com/vgKKvsD.png suncast 重型储物箱是 2 系列名称产品。为了使所有内容看起来“一致”，调整了其他产品的高度，即使它们没有 2 行产品名称。

我的JS代码是;

$(window).bind('load',function(){
    var largestHeight=0;
    $('.prodbox').each(function(){
        var prodbox=$(this);
        var prodboxHeight=prodbox.height();
        if(prodboxHeight>largestHeight){
            largestHeight=prodboxHeight}
        });
$('.prodbox').height(largestHeight)});

Answer 1

DEMO

$(".prodbox").each(function(i){
    i++;
    $rowNumber = (Math.ceil(i/4) - 1)*4;
    $maxHeight = Math.max(
            $(".prodbox").eq($rowNumber).height(),
            $(".prodbox").eq($rowNumber+1).height(),
            $(".prodbox").eq($rowNumber+2).height(),
            $(".prodbox").eq($rowNumber+3).height()
        );
    $(this).height($maxHeight);
});