Question

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

在这个对象中，我试图将一个选择器传递给一个驻留在我的对象方法中的JQuery方法。不幸的是，我无法以这种方式获得每个项目，并且我的每个语句都不会触发，但对象返回0个项目。

以下是我的对象示例：

SELECT DISTINCT o.name AS Object_Name,o.type_desc
FROM sys.sql_modules m 
INNER JOIN sys.objects  o ON m.object_id=o.object_id
WHERE m.definition Like '%HARDCODEDLITERAL%'

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

Answer 1

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

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

3 个答案: