0

我有一些代码如下：

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>

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

4

3 回答 3

3

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

$('document').ready(function(){
    var maxHeight = 0;
    $(".product-info").each(function(){
        maxHeight = Math.max(maxHeight, $(this).height());     
    });
    $(".product-info").height(maxHeight);
});​
于 2012-09-22T08:14:31.813 回答
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/

于 2012-09-22T08:22:53.523 回答
1

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

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

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

于 2012-09-22T08:08:01.367 回答