Question

假设我有一个产品清单，每行有3个产品。每个产品都有边框，但边框的高度因产品而异（因为图像高度不同或标题线较多等）。我想要的是一个功能，它将检查具有最大高度的产品。因此，它将为其他产品提供与每条线的最大div高度相关的相同高度。

因此，在每一行中，该函数将再次与该行的较高div相关。

让我们玩这个代码：

CSS

.yagVmCategoryViewProductRow.row-fluid {
border: 1px solid #dedede;
width: 750px;
text-align: center;
padding: 10px 0 10px 10px;
}

.yagVmCategoryGridProductItem.span4 {
float: left;
width: 28.5%;
border: 1px solid #dedede;
padding: 10px;
margin-right: 10px;
}

.clear {
clear: both;
}

HTML

<div class="yagVmCategoryViewProductRow row-fluid">

    <div class="yagVmCategoryGridProductItem span4">
        <div class="yagVmCategoryGridProductItemSpacer">
            <div class="yagVmCategoryGridProductItemImg">               
                <div class="yagVmCategoryGridProductItemImgInner">                                  
                    <a class="yagVmCategoryGridProductItemImgLink" href="/index.php/el/proionta/energeia/zesto-nero/hliakos-thermosifonas-pyramis-120lt-epillektikou-syllekti-diplis-nergeias-detail">
                        <img class="featuredProductImage" src="http://polykatastima.net/images/stories/virtuemart/product/resized/ηλιακός-θερμοσίφωνας-120lt-επιλεκτικού-συλλέκτη-απλός_200x200.jpg" >
                    </a>
                </div>
            </div>
            <div class="yagVmCategoryGridProductTitle">
                <h4 class="yagMobileHead4"><a href="/index.php/el/proionta/energeia/zesto-nero/hliakos-thermosifonas-pyramis-120lt-epillektikou-syllekti-diplis-nergeias-detail">text text text text text text text text text text text text text text text text text</a></h4>
            </div>
            <div class="yagVmCategoryGridProductItemPrice" id="productPrice266">
                <div class="yagVmCategoryGridProdPriceBox">
                    <div class="yagVmCategoryGridProdPriceBoxRedInner">
                      <div class="PricesalesPrice"><span class="PricesalesPrice">736,00 €</span></div>                                              </div>

                    <div class="yagVmCategoryGridProdPriceBoxGreyInner">
                      <div class="PricebasePrice"><span class="PricebasePrice">1008,00 €</span></div>                                                   </div>

                </div>
            </div>
        </div>
    </div>
    <div class="yagVmCategoryGridProductItem span4">
        <div class="yagVmCategoryGridProductItemSpacer">
            <div class="yagVmCategoryGridProductItemImg">               
                <div class="yagVmCategoryGridProductItemImgInner">                                  
                    <a class="yagVmCategoryGridProductItemImgLink" href="/index.php/el/proionta/energeia/zesto-nero/hliakos-thermosifonas-pyramis-120lt-epillektikou-syllekti-diplis-nergeias-detail" >
                        <img class="featuredProductImage" src="http://polykatastima.net/images/stories/virtuemart/product/resized/free-standing-freezer-refrigerator-fsh-187-no-frost_n_200x200.jpg">
                    </a>
                </div>
            </div>
            <div class="yagVmCategoryGridProductTitle">
                <h4 class="yagMobileHead4">
                    <a href="/index.php/el/proionta/koyzina/neroxytes/pyragranite-caldera-86-51-1-3-4b-detail" >Pyragranite Caldera (86X51) 1 3/4B</a>
                </h4>
            </div>
            <div class="yagVmCategoryGridProductItemPrice" id="productPrice266">
                <div class="yagVmCategoryGridProdPriceBox">
                    <div class="yagVmCategoryGridProdPriceBoxRedInner">
                      <div class="PricesalesPrice"><span class="PricesalesPrice">736,00 €</span></div>                                              </div>

                    <div class="yagVmCategoryGridProdPriceBoxGreyInner">
                      <div class="PricebasePrice"><span class="PricebasePrice">1008,00 €</span></div>                                                   </div>

                </div>
            </div>
        </div>
    </div>
    <div class="yagVmCategoryGridProductItem span4">
        <div class="yagVmCategoryGridProductItemSpacer">
            <div class="yagVmCategoryGridProductItemImg">               
                <div class="yagVmCategoryGridProductItemImgInner">                                  
                    <a class="yagVmCategoryGridProductItemImgLink" href="/index.php/el/proionta/energeia/zesto-nero/hliakos-thermosifonas-pyramis-120lt-epillektikou-syllekti-diplis-nergeias-detail">
                        <img class="featuredProductImage" src="http://polykatastima.net/images/stories/virtuemart/product/resized/caldera-(86x51)-1-3-4b_200x200.jpg">
                    </a>
                </div>
            </div>
            <div class="yagVmCategoryGridProductTitle">
                <h4 class="yagMobileHead4">
                    <a href="/index.php/el/proionta/koyzina/neroxytes/pyragranite-caldera-86-51-1-3-4b-detail" >Pyragranite Caldera (86X51) 1 3/4B</a>
                </h4>
            </div>
            <div class="yagVmCategoryGridProductItemPrice" id="productPrice266">
                <div class="yagVmCategoryGridProdPriceBox">
                    <div class="yagVmCategoryGridProdPriceBoxRedInner">
                      <div class="PricesalesPrice" style="display : block;"><span class="PricesalesPrice">736,00 €</span></div>                                             </div>

                    <div class="yagVmCategoryGridProdPriceBoxGreyInner">
                      <div class="PricebasePrice" style="display : block;"><span class="PricebasePrice">1008,00 €</span></div>                                                  </div>
                </div>
            </div>
        </div>
    </div>

    <div class="clear"></div>

</div>

已更新 http://jsfiddle.net/k30kveje/

Answer 1

试试这个

var maxHeight = Math.max.apply(null, $("div.yagVmCategoryGridProductItem").map(function ()
{
    return $(this).height();
}).get());

您也可以尝试使用此

$(document).ready(function() {
   var maxHeight = -1;

   $('.yagVmCategoryGridProductItem').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.yagVmCategoryGridProductItem').each(function() {
     $(this).height(maxHeight);
   });
 });

Answer 2

@Ram Sharma的回答是正确的。我做了一个小调整。这是Demo

JS代码：

$(document).ready(function(){

    $("div.row-fluid").each(function(){
            var maxHeight = Math.max.apply(null, $(this).find("div.yagVmCategoryGridProductItem").map(function ()
        {
            return $(this).height();
        }).get());

        $(this).find("div.yagVmCategoryGridProductItem").css("height", maxHeight);
    });



});

具有动态高度的产品列表行

2 个答案: