Question

我正在尝试实现可以通过jQuery实现的功能，但我正在避免使用jQuery学习JavaScript。我正在尝试从.map获取最大的数字。这是我到目前为止所做的。

function equalHeight(className) {
  var i = Array.from(document.getElementsByClassName(className));
  i.forEach(function(items) {
    console.info(Math.max(items.scrollHeight));
  });
}

但这没有记录

console.info(items.scrollHeight);

记录所有三个数字。

我知道我遗漏了 elementary 错误，有人可以指出我在做什么错吗？

基本上，我想获得最长的高度并将其设置为div的其余部分

Answer 1

我会使用.getBoundingClientRect()并为每次迭代进行比较

function equalHeight(className) {
  const elements = Array.from(document.getElementsByClassName(className));
  let highest = 0;

  elements.forEach(function(item) {
     const itemH = item.getBoundingClientRect().height;
     highest = itemH > highest ? itemH : highest;
  });

  return highest;
}

文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 2

我不是100％确切地确定您要追求的是什么，但是有几件事：

1）从getElementsByClassName切换到querySelectorAll将为您提供一个内置forEach的对象。

2）您只向Math.max传递了1个值

function equalHeight(className) {
  var max = 0;
  document.querySelectorAll(className).forEach(
    function(el) {
      console.info(Math.max(el.scrollHeight, max));
      if (el.scrollHeight > max) {
        max = el.scrollHeight;
      }
    }
  );
  
  return max;
}

var max = equalHeight('.test');

console.info('Max div height:', max);

div {
  border: 1px dashed red;
  margin: 2px 0;
}

<div class="test">one</div>
<div class="test">one<br/>two</div>
<div class="test">one<br/>two<br/>three</div>

更新

对于您的问题“现在如何使用此值作为其余div的高度”：

function getMaxHeight(className) {
  var max = 0;
  document.querySelectorAll(className).forEach(
    function(el) {
      console.info(Math.max(el.scrollHeight, max));
      if (el.scrollHeight > max) {
        max = el.scrollHeight;
      }
    }
  );
  
  return max;
}

function setHeight(className, height) {
  document.querySelectorAll(className).forEach(
    function(el) {
      el.style.height = height+'px';
    }
  );
}


var max = getMaxHeight('.test');

console.info('Max div height:', max);

setHeight('.test', max);

div {
  border: 1px dashed red;
  margin: 2px 0;
}

<div class="test">one</div>
<div class="test">one<br/>two</div>
<div class="test">one<br/>two<br/>three</div>

但是，一旦执行此操作，所有DIV都不会再次更改高度。

您可以设置el.style.minHeight，然后再次检查DIV中是否有任何更改。

如何从纯JavaScript获取div的最长高度？

2 个答案: