Question

我有一些代码如下：

HTML：

    <ul id="product-matrix" class="clearfix">
    <li class="product product-medium">
        <a href="#" class="showQuickViewPan">
            <img src="../images/556116.jpg" class="product-image" height="243" width="243" />
        </a>    
        <div class="swatch-container">
          <p class="visually-hidden">Color Options:</p>
        </div>   
        <div class="product-info">
          <h2> <a href="#"> Travelpro FlightPro Rolling Tote</a> </h2>
          <p class="price-original price-small"> <span>regular&nbsp;</span>$299.99</p>
        </div>
        <div class="ratings-info">
            <a class="ratingsimage" href="#"><img src="../images/rating-5.0.gif" alt=""/></a>
            <span class="reviewcount">(<a href="#">5</a>)</span>
        </div>    
        <img src="../images/Online_Exclusive_v1_m56577569836982197.gif" alt="" />    
        <img src="../images/OnlyAtKohls_Burg_v1_m56577569836982195.gif" alt="" />
    </li>
    <li class="product product-medium">
        <a href="#" class="sr-item-new"><span class="sr-new-img"></span>
            <img src="../images/742063_Black.jpg" class="product-image" height="243" width="243"/>
        </a>
        <div class="swatch-container">
            <p class="visually-hidden">Color Options:</p>
            <ul class="clearfix"><li></li></ul>
        </div>
        <div class="product-info">
            <h2><a href="#">Columbia Wool Jacket</a></h2>
            <p class="price-original"><span>original&nbsp;</span>$200.00</p>
        </div>
        <div class="ratings-info">
            <a class="ratingsimage" href="#"><img src="../images/rating-5.0.gif" alt=""/></a>
            <span class="reviewcount">(<a href="#">5</a>)</span>
        </div>
        <img src="../images/Online_Exclusive_v1_m56577569836982197.gif" />
        <img src="../images/Online_Exclusive_v1_m56577569836982197.gif" />
     </li>
...
    </ul>

在上面的代码中， product-info DIV可能有2到10行文字，所以现在我想要实现的是我想要计算产品的高度（） -info DIV并为所有LI中的所有product-info DIV分配相同的高度，我无法解决。任何帮助是极大的赞赏。谢谢！

Answer 1

找到最大高度，然后使用jQuery设置为所有其他div。

$('document').ready(function(){
    var maxHeight = 0;
    $(".product-info").each(function(){
        maxHeight = Math.max(maxHeight, $(this).height());     
    });
    $(".product-info").height(maxHeight);
});

Answer 2

您可以利用$.map一次获得所有高度，然后使用Math.max.apply查找该集合的最大值：

var max = Math.max.apply(null, $(".product-info").map(function() {
    return $(this).height();
}));
$(".product-info").height(max);

请参阅http://jsfiddle.net/q8gzz/1/

Answer 3

使用JQuery，您可以在页面加载后检索DIV的高度，并将此值应用于其他元素：

$('document').ready({
    var newHeight = $('#product-info').height();
    $('li').each(function(){
        $(this).height(newHeight);
    });
});

下面的评论是正确的，没有元素ID作为参考。因此，在引用元素中添加ID并替换“＃product-id”

比较LI中的所有DIV并将最大高度设置为DIV与LI中的其他DIV

3 个答案: