jQuery 等高 div [英] jQuery Equal Height Divs

问题描述

如果我有以下标记；

<div id="container"><div id="盒子"><div id='sameHeight'>一<br>二<br>三</div><div id='sameHeight'>四个</div><div id='sameHeight'>五个</div>
<div id="盒子"><div id='sameHeight'>四个</div><div id='sameHeight'>六</div><div id='sameHeight'>七<br>八</div>
</div>

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

我查看了 equalHeights 插件，但它假定所有并排的 div 都在同一个父级中.我需要一个可以遍历父母或允许我指定父母的人.

有这样的东西还是我需要写?

编辑

我的解释似乎造成了一些混乱，所以我希望这能澄清一点.

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

盒子"div 并排放置.

然后，每个相同高度的 div 在其父级中位于另一个之下.

我要解决的问题是让与其相对侧匹配的每个 sameHeights 具有相同的高度.

它应该看起来像一个网格，我猜不使用网格.

我希望这会有所帮助.

编辑 2

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

函数 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 });}别的 {$('#container>div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight });}}}

解决方案

首先，你可能知道只有一个元素应该有任何一个 id 属性.所以我把选择器改成了下面的类.即使您可能不关心 W3C 标准，浏览器或 JavaScript API 等也可能依赖此行为，并且现在或将来都无法正常工作.

 $(document).ready(function () {$('div.parentDiv > div').each(function() {var $sameHeightChildren = $(this).find('.sameHeight');变量最大高度 = 0;$sameHeightChildren.each(function() {maxHeight = Math.max(maxHeight, $(this).outerHeight());});$sameHeightChildren.css({ height: maxHeight + 'px' });});});

注意:如果您希望它们都具有相同的高度，尽管它们的父 div 是相同的，这就是您想要的.

$(document).ready(function () {var $sameHeightDivs = $('.sameHeight');变量最大高度 = 0;$sameHeightDivs.each(function() {maxHeight = Math.max(maxHeight, $(this).outerHeight());});$sameHeightDivs.css({ height: maxHeight + 'px' });});

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

另外，这个答案 可能会显示一些其他选项.

还要注意，如果里面的内容再次改变(可能是通过 JavaScript)，你需要再次调用它，或者把它放在一个 setInterval() 我不强烈>推荐.

If i have the following markup;

<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>

How can I ensure that all divs marked as "sameHeight" are the same height as their counterparts in the other 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?

EDIT

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.

The "box" divs sit side by side.

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

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.

I hope this helps.

EDIT 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 });
        }
    }
}

解决方案

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' });


    });
});

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' });
});

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.

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 等高 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！