如何使用 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

在渲染divs 之前，您的脚本已在头部初始化。将脚本移动到正文末尾，或者使用 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);
});

Answer 2

正如上面的海报所述，您的代码在加载元素之前就在头部初始化。如果您在控制台中查看该对象，您可以看到该对象正在引用整个文档的根。为了将来参考，在小提琴中，在“框架和扩展”下，将第二个下拉菜单从“nowrap - in head”切换到“onload”可以达到与上一个答案相同的结果。

您定义了 2 个变量。我假设目的是定义一个上下文 - heightBalance.containerName 然后在该上下文中搜索最高的孩子并修改所有孩子以匹配该高度。 heightBalance.childElements.

您的函数没有使用 heightBalance.containerName。所以$(this.childElements) 只是在页面上查找任何 div。在控制台中，您可以看到容器与子元素一起列出。

您可能希望将其更改为类似于var divs = $('#containers').find('div') 或短格式$('div', '#containers')

alert: function(){
       var divs = $('#containers').find('div') 
       console.log(divs); 
       $.each(divs, function(index, value){
        console.log('working'); 
       });  

   }

Answer 3

我稍微修改了我的代码并让它工作。感谢大家在我需要初始化 JQuery 以使其正常运行时向我展示。

var heightBalance = {
containerName:  '',
childElements: '', 
heightArray: [], 
calc: function(){
   var divs = $(this.containerName + " " + this.childElements); 
   $.each(divs, function(index, value){
    var innHeight = $(value).height(); ; 
    heightBalance.heightArray.push(innHeight); 
   });  
   this.largestHeight(this.heightArray); 
},
largestHeight: function(data)
 {
   var i = data.indexOf(Math.max.apply(Math, data));
   $(heightBalance.childElements).height(this.heightArray[i] ); 
  }
}