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>

上記のコードでは、product-info DIV に 2 ～ 10 行のテキストが含まれる可能性があるため、今私が達成しようとしているのは、product-info DIV の height() を計算し、すべての製品に同じ高さを割り当てたいということです。私が解決できないすべての 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 に答える