Question

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

基本上，我在一行上有“产品盒”（.prodbox），每行有4个产品。我想让它们变得更好。用这个JS制服。但我只想让它一次生成1行，所以每一行都与它本身内联。

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

例如：http://i.imgur.com/vgKKvsD.png阳光重型储物盒是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);
});

Answer 2

如果您的HTML看起来像这样，那么容器内的每一行.prodbox元素（我在这里给它类line）：

<div class="line">
     <div class="prodbox"></div>
     <div class="prodbox"></div>
     <div class="prodbox"></div>
     <div class="prodbox"></div>
</div>
<div class="line">
     <div class="prodbox"></div>
     <div class="prodbox"></div>
     <div class="prodbox"></div>
     <div class="prodbox"></div>
</div>

然后，您可以遍历line元素并使用JQuery的find方法获取每行中的所有.prodbox元素。 javascript可能看起来像这样（未经测试）：

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

Answer 3

我的建议是将每行包含在一个带有“行”类的div中。然后你可以遍历每一行，并使用你自己的代码。

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

4个元素的平等高度

3 个答案: