Question

我正在使用下面的代码尝试设置我的div高度，所以它们都取决于给定的最高div。然而，我的盒子仍然显示为下图 - 我已经做了一个警报，然后开始，所以我知道我的jQuery正在工作：

问题：

的 jQuery的：

$(document).ready(function() {
    var max = -1;
    $('.menuBoxesParagraph > div').each(function() {
    var h = $(this).height(); 
    max = h > max ? h : max;

    $(this).css({'min-height': max});
  });
 });

HTML：

<div class="menu1 menuBoxesParagraph">
    <p><span class="menu1Title"></span></p>
    <p>Content</p>
</div>

CSS：

.menuBoxesParagraph{
    width: 25%;
    border: 10px solid #000;
    margin: 2% 1% 0px 0px;
    padding: 5px;
    text-align: center;
}
.menuBoxesParagraph:before, .menuBoxesParagraph:after { content: ""; display: table; }
.menuBoxesParagraph:after { clear: both; }
.menuBoxesParagraph { zoom: 1; }

Answer 1

希望这能解决你的问题（JS）：

    var max = -1;
    $('.menuBoxesParagraph').each(function() {

    var h = $(this).height(); 
    max = h > max ? h : max;

  });


$(".menuBoxesParagraph").css("height",max+"px");

我想有两件事，一件是你在选择器menuBoxesParagraph > div中使用了一个不存在的div。因为max总是-1。高度也缺少“px”值。

JS FIDDLE：http://jsfiddle.net/36e1ub3x/14/

Answer 2

<强> DEMO

$(document).ready(function () {
  var highestBox = 0;
  $('.menuBoxesParagraph').each(function () {
    if ($(this).height() > highestBox) highestBox = $(this).height();
  });
  $('.menuBoxesParagraph').height(highestBox);
});

#nonTabbed {
    width:980px;
    diplay:block;
    float:left;
    margin:0 0 50px 0;
}
.menu1 {
    float:left;
    width:31%;
    margin:0 2% 0 0;
}
.menu1Title {
    color:#F70000;
    font-weight:bold;
}
.menu1Title2 {
    color:#000;
    font-weight:bold;
}
.menuBoxesParagraph {
    width: 25%;
    border: 10px solid #000;
    margin: 2% 1% 0px 0px;
    padding: 5px;
    text-align: center;
}
.menuBoxesParagraph:before, .menuBoxesParagraph:after {
    content:"";
    display: table;
}
.menuBoxesParagraph:after {
    clear: both;
}
.menuBoxesParagraph {
    zoom: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="nonTabbed">
  <div class="menu1 menuBoxesParagraph">
    <p><span class="menu1Title">Mains </span>
    </p>
    <p>Roast leg of pork with crackling, gravy and applesauce</p>
    <p>Stuffed loin of pork with sage and onion forcemeat with calvados gravy.</p>
    <p>Chicken supreme roasted with lemon, olives and wild oregano with a hint of white wine.</p>
    <p>Free range chicken breasts marinated in orange and ginger.</p>
    <p>Butterflied leg of lamb stuffed with couscous, apricots, almonds, dates, preserved lemons and rubbed with sumac. Accompanied with minted yoghurt.</p>
    <p>Roast rump of lamb rubbed with rosemary, garlic and olive oil served with a salsa Verdi.</p>
    <p>Roast rib of beef with Yorkshire puddings, gravy and horseradish (excess $2.50 per person)</p>
    <p>Whole fillet of beef marinated in port, bay leaves and thyme served with a béarnaise sauce (excess of $5.00 per person)</p>
    <p>Hot smoked salmon fillets, smoked over our own spices and woodchips served with lemon mayo</p>
  </div>
  <div class="menu1 menuBoxesParagraph">
    <p><span class="menu1Title">Sides</span>
    </p>
    <p><span class="menu1Title2">Hot</span>
    </p>
    <p>Baby new potatoes drizzled with extra virgin olive oil and dill.</p>p>Roasted potatoes cooked whole garlic cloves and thyme.</p>
    <p>Dauphoise potatoes, sliced potatoes baked with cream, garlic and nutmeg</p>
    <p>Hasselback potatoes, whole potatoes sliced ¾ way down and topped with parmesan and baked till crisp.</p>
    <p>Roast seasonal vegetables with herbs.</p>
    <p>Creamed spinach with nutmeg.</p>
    <p>Pumpkin mash.</p>
    <p><span class="menu1Title2">Cold</span>
    </p>
    <p>Fennel, orange and toasted almond salad.</p>
    <p>Baby roasted potato salad drizzled with balsamic dressing and shaved parmesan.</p>
    <p>Tagliatelle with roasted vine tomatoes, black olives and green peppers tossed in basil dressing.</p>
    <p>Moroccan couscous salad with baked egg plant, dates, pistachio nuts and preserved lemon.</p>
    <p>Honey roasted kumara, chickpeas, coriander, spinach and tamarind dressing.</p>
    <p>Baby gem lettuce with roasted pear, toasted walnuts and blue cheese dressing.</p>
    <p>Rocket, watercress, broccoli, French beans, peas, fresh herbs and feta cheese salad.</p>
  </div>
  <div class="menu1 menuBoxesParagraph">
    <p><span class="menu1Title">Desserts</span>
    </p>
    <p>Lemon soufflé <span class="gf">GF</span>
    </p>
    <p>Hazelnut meringue stack with whipped cream and berries. <span class="gf">GF</span>
    </p>
    <p>Ginger sticky toffee pudding with toffee sauce and anglaise</p>
    <p>Apple, apricot and nut strudel with our own home made ice cream</p>
    <p>Chocolate and almond torte <span class="gf">GF</span>
    </p>
    <p>Plum frangipan</p>
    <p>Baked chocolate cheese cake</p>
    <p>Banoffee pie- biscuit base filled with toffee caramel, banana, whipped cream and shave chocolate</p>
    <p>Pear poached in sweet wine with cinnamon and star anise, served with cinnamon Chantilly cream and shortbread fingers</p>
    <p>Brown sugar meringues with fresh fruit salad <span class="gf">GF</span> 
    </p>
  </div>
</div>

Answer 3

只需添加以下JQUERY： -

$(document).ready(function(){  
    var max = -1;
    $('.menuBoxesParagraph > div').ready(function() {
        var h = $(this).height(); 
        max = h > max ? h : max;
        alert(h+"--"+max);    
        //$(this).css({'min-height': max});
        $(".menuBoxesParagraph").css("height",max+"px");
    });
});

全高div不工作

3 个答案: