代码之家 › 专栏 › 技术社区 › griegs

jquery等高divs

jquery-plugins jquery

griegs · 技术社区 · 15 年前

如果我有以下标记:

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

如何确保所有标记为“相同高度”的分隔带与其他分隔带中的对应分隔带具有相同的高度?

我看过EqualHeights插件,但这假设所有的div都在同一个父级中。我需要一个可以遍历父级或允许我指定父级的。

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

编辑

我的解释似乎有些混乱,所以我希望这能让事情变得清楚一点。

查看新标记时,容器是一个简单的框。

这个“盒子”是并排坐着的。

然后,每个相同的DIV在其父级中一个位于另一个之下。

我要解决的问题是让每一个相同的八分之一与它的对立面高度相同。

它应该看起来像一个网格,我猜是用一个网格。

我希望这有帮助。

编辑2

到目前为止,我已经想出了一个更好的方法吗?

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

3 回复 | 直到 15 年前

Community CDub 8 年前

首先,您可能知道只有一个元素应该有任何一个元素 id 属性。所以我把选择器改成了下面的类。即使您可能不关心W3C标准,浏览器或JavaScriptAPI等也可能依赖于这种行为,现在或将来都不会工作。

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


    });
});

注释 :如果您希望它们的高度相同,而不考虑它们的父级,那么这就是您想要的。

$(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 answer 可以给你看一些其他的选择。

也请注意,如果内部内容再次发生变化(可能通过javascript),您需要再次调用它,或者将其放入 setInterval() 哪一个我不推荐。

Maverick 15 年前

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

在使用jquery的javascript中,编写:

$(document).ready(function () {    
    $("div.parentDiv div div.sameHeight").css({ height: "100px" });
});

kwyjibo 15 年前

为什么不用桌子?

imho,用这样的javascript进行布局比通过表进行布局更糟糕。如果用户调整浏览器的大小会发生什么?你必须捕获调整大小事件,但当调整大小时,你会有一定的滞后性,这会使你的网站看起来没有抛光。