Javascript 确保元素高度相等_Javascript_Jquery

Javascript 确保元素高度相等

javascript jquery

Javascript 确保元素高度相等,javascript,jquery,Javascript,Jquery,我对两个相邻的div“列”有问题。这是一个常见的用例，其中一个可能比另一个高很多，这可能是一个可用性问题，因为用户将项目从一个div拖放到另一个div 使用jQuery，我希望确保这两列的高度始终相等。不仅在页面加载上，而且如果它们的内部内容发生了变化，或者它们使用jQuery设置了动画，或者页面被调整了大小，或者由于其他任何可能的原因较高的div的高度发生了变化，那么另一个div也会随之变化实现这一目标的最快处理方式是什么？（我希望窗口调整时重画的延迟最小）提前多谢您可以绑定到所有匹配d

我对两个相邻的div“列”有问题。这是一个常见的用例，其中一个可能比另一个高很多，这可能是一个可用性问题，因为用户将项目从一个div拖放到另一个div

使用jQuery，我希望确保这两列的高度始终相等。不仅在页面加载上，而且如果它们的内部内容发生了变化，或者它们使用jQuery设置了动画，或者页面被调整了大小，或者由于其他任何可能的原因较高的div的高度发生了变化，那么另一个div也会随之变化

实现这一目标的最快处理方式是什么？（我希望窗口调整时重画的延迟最小）

提前多谢

您可以绑定到所有匹配div上的

resize

事件，然后在回调中只需将它们的高度设置为彼此相等即可。以下是一个例子：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
                setInterval(checkSizes, 1000);
            });

            $(window).resize(function(){
                checkSizes();
            });


            function checkSizes(){
                if($("#myDiv1").height() != $("#myDiv2").height()){
                    console.log("Sizes do not match");
                    alert("Sizes do not match");
                }
            }
    </script>
</head>
<body>
    <div id="myDiv1">
        test
    </div>
    <div id="myDiv2">
        test<br />
        test
    </div>
</body>
</html>

$(document).on("resize", ".selector", function() {
    var max = function(array){ return Math.max.apply(Math, array); }
    var heights = $(".selector").map(function() { return $(this).height() }).get();
    $(".selector").height(max(heights));
});

上面的处理程序包含3个步骤：

创建一个函数，从任意数组中获取最大值

找到所有高度并将它们排列成一个阵列

最后将每个元素的高度设置为最大值

如果您不需要支持早于v8的IE，那么CSS可以使用

display:table cell

foo>栏为您提供支持
<div class="same_height_kids"><div>foo></div><div>bar</div></div>

$('.same_height_kids').bind('DOMSubtreeModified change', function(e){
  var min = 0;
  $(e.currentTarget).children().each(function(i, e){
    $(e).css({minHeight: 0});
    if($(e).height() > min){
      min = $(e).height();
    }
  });
  $(e.currentTarget).css({minHeight: min});
  $(e.currentTarget).children().each(function(i, e){
    $(e).css({minHeight: min});  
  });
});

$（'.same_height_kids'）.bind（'domsubtredemodified change'，函数（e）{
var min=0；
$（e.currentTarget）.children（）.each（函数（i，e）{
$（e）.css（{minHeight:0}）；
如果（$（e）.height（）>min）{
最小=$（e）.高度（）；
}
});
$（e.currentTarget）.css（{minHeight:min}）；
$（e.currentTarget）.children（）.each（函数（i，e）{
$（e）.css（{minHeight:min}）；
});
});

这不是经过测试的代码。opera也不支持大于9的DOMSubtreeModified事件。据我所知，onChange事件在某些浏览器中起作用。onResize通常仅在窗口和框架上

这个实现有一个缺陷，就是div不能变小。为此，在计算新高度之前，必须删除最小高度

编辑：更新代码。我确实想到了一个关于

的例子，但不幸的是，我确实需要支持IE7：-（那太好了，但它似乎应用了第一个.my_选择器的高度，而不是最高的。通常（但不总是）右边的列会更高，所以我需要一个选择器来选择事实上最高的一个。有没有干净的方法来实现这一点？我的错误。是的，有一个干净的方法-只需要两个步骤。答案更新。就像我对TheDeeno说的，我需要一种方法来以干净的方式找出哪个div是最高的。我可能需要这个实现对于将来的其他事情，一个与要比较的div数量无关的解决方案将是gravy。下面是一个插件，它也适用于响应性布局：

<div class="same_height_kids"><div>foo></div><div>bar</div></div>

$('.same_height_kids').bind('DOMSubtreeModified change', function(e){
  var min = 0;
  $(e.currentTarget).children().each(function(i, e){
    $(e).css({minHeight: 0});
    if($(e).height() > min){
      min = $(e).height();
    }
  });
  $(e.currentTarget).css({minHeight: min});
  $(e.currentTarget).children().each(function(i, e){
    $(e).css({minHeight: min});  
  });
});