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

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

记录所有三个数字。

我知道我遗漏了一个基本错误，有人可以指出我做错了什么吗？

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

Answer 1

我不是 100% 确定您到底在追求什么，但有几点:

1) 从 getElementsByClassName 切换到 querySelectorAll 会得到一个内置了 forEach 的对象。

2) 您只将 1 个值传递给 Math.max

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 中的任何内容。