javascript - 如何使用 JavaScript 使每个 div 的高度相等？

Question

我正在尝试创建一个对象来确定一组元素的最高高度，并使每个元素与最大元素的高度相匹配。

在这个对象中，我试图将一个选择器传递给驻留在我的对象方法内部的 JQuery 方法。不幸的是，我无法通过这种方式获取每个元素，并且我的 Each 语句不会触发，但该对象返回 0 个元素。

下面是我的对象的一个​​例子:

var heightBalance = {
  containerName: '',
  childElements: '',
  alert: function() {
    var divs = $(this.childElements);
    console.log(divs);
    $.each(divs, function(index, value) {
      console.log('working');
    });

  }
}

heightBalance.containerName = '#containers';
heightBalance.childElements = 'div';
heightBalance.alert();

#one {
  background-color: green;
  width: 50px;
  height: 200px;
}
div {
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containers">
  <div id="one">d</div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
</div>

Answer 1

在呈现 div 之前，您的脚本在头部进行了初始化。将脚本移动到正文末尾，或使用 jQuery 就绪函数 ( fiddle ):

$(function () {
    var heightBalance = {
        containerName: '',
        childElements: '',
        alert: function () {
            var divs = $(this.childElements);
            console.log(divs);
            $.each(divs, function (index, value) {
                console.log('working');
            });

        }
    }

    heightBalance.containerName = '#containers';
    heightBalance.childElements = 'div';
    heightBalance.alert();
});

这answer中的代码会给你你想要的相同高度:

$(function() {
  // Get an array of all element heights
  var elementHeights = $('.features').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('.features').height(maxHeight);
});