jQuery等高Divs [英] jQuery Equal Height Divs

问题描述

如果我有以下标记；

<div id="container">
  <div id="box">
    <div id='sameHeight'>One<br>two<br>three</div>
    <div id='sameHeight'>four</div>
    <div id='sameHeight'>five</div>        
  <div>
  <div id="box">
    <div id='sameHeight'>four</div>
    <div id='sameHeight'>six</div>
    <div id='sameHeight'>seven<br>eight</div>
  <div>
</div>

如何确保所有标记为"sameHeight"的div与其他div的高度相同?

How can I ensure that all divs marked as "sameHeight" are the same height as their counterparts in the other div?

我看过equalHeights插件，但假设所有div并排在同一个父对象中.我需要一个既可以遍历父母又可以指定父母的人.

I had a look at the equalHeights plugin but that assumes all divs side by side are in the same parent. I need one that can either traverse parents or allow me to specify parents.

有没有这样的东西，或者我需要写吗?

Is there such a thing or do I need to write it?

编辑

我的解释似乎引起了一些混乱，所以我希望这可以使事情变得更清楚.

I seem to have caused some confusion in my explanation so I hope this clears things up a little.

查看新标记，该容器是一个简单的盒子.

Looking at the new markup, the container is a simple box.

框" div并排放置.

The "box" divs sit side by side.

每个sameheight div然后在其父级中位于另一个之下.

Each sameheight div then sits one under the other within its parent.

我要解决的问题是使与之匹配的每个sameHeight的另一边具有相同的高度.

The thing i'm trying to solve is to have each of the sameHeights that match to it's opposite side the same height.

它看起来应该像一个网格，我猜想它是用网格的.

it should look like a grid i guess w/out using a grid.

我希望这会有所帮助.

编辑2

到目前为止，这是我想出的，但是还有更好的方法吗?

This is so far what I have come up with but is there a better way?

function SetHeights() {
    var numLines = $('#container>div:eq(0) .sameHeight').length;

    for (var t = 0; t < numLines; t++) {
        var leftHeight = $('#container>div:eq(0) .sameHeight:eq(' + t + ')').outerHeight();
        var rightHeight = $('#container>div:eq(1) .sameHeight:eq(' + t + ')').outerHeight();

        if (leftHeight > rightHeight) {
            $('#container>div:eq(1) .sameHeight:eq(' + t + ')').css({ height: leftHeight });
        }
        else {
            $('#container>div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight });
        }
    }
}

推荐答案

首先，您可能知道只有一个元素应具有任何一个id属性.因此，我将选择器更改为下面的类.即使您可能不关心W3C标准，浏览器或JavaScript API等也可能依赖于此行为，并且现在或将来都无法使用.

Firstly, you are probably aware only one element should have any one id attribute. So I have changed the selectors as if they were classes to classes below. Even though you may not give a care about W3C standards, browsers or JavaScript API, etc may rely on this behaviour and not work now or in the future.

   $(document).ready(function () {    
        $('div.parentDiv > div').each(function() {

        var $sameHeightChildren = $(this).find('.sameHeight');
        var maxHeight = 0;

        $sameHeightChildren.each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $sameHeightChildren.css({ height: maxHeight + 'px' });


    });
});

注意:如果您希望他们的父div尽管所有人都相同，那么这就是您想要的.

Note: If you want them all to be the same height despite their parent div, this is what you want.

$(document).ready(function () {    
        var $sameHeightDivs = $('.sameHeight');
        var maxHeight = 0;
        $sameHeightDivs.each(function() {

            maxHeight = Math.max(maxHeight, $(this).outerHeight());

        });

        $sameHeightDivs.css({ height: maxHeight + 'px' });
});

这会将它们设置为每个父div元素的最高高度.

This will set them to all be the height of the tallest, per parent div element.

此外，此答案可能还会向您显示一些其他选项.

Also, this answer may show you some other options.

还请注意，如果内部内容再次更改(可能通过JavaScript)，您将需要再次调用此内容，或将其放在我不建议的setInterval()中.

Note too that if the content inside changes again (perhaps via JavaScript), you will need to call this again, or put it in a setInterval() which I do not recommend.

这篇关于jQuery等高Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！