代码之家 › 专栏 › 技术社区 › JoSch

javascript:使用reduce()方法来确定最宽的DOM元素?

reduce dom javascript

JoSch · 技术社区 · 2 年前

我正在尝试使用Javascript reduce() 方法,以在一组DOM节点中找到具有最大宽度的元素:

function get_elementWidth(ELEMENT) {
  const DOMrect = ELEMENT.getBoundingClientRect();
  const width = DOMrect.width;
  return width
}

function get_widestElemet(ELEMENTS) {
  const widestElement = ELEMENTS.reduce((a, b) => Math.max(get_elementWidth(a), get_elementWidth(b)))
  return widestElement;
}

const elements = document.querySelectorAll('.ElementGroup__element');
console.log(get_widestElemet([...elements]))

.ElementGroup {
  display: flex;
  flex-direction: column;
}

<div class="ElementGroup">
  <span class="ElementGroup__element">Short Element</span>
  <span class="ElementGroup__element">Short Element</span>
  <span class="ElementGroup__element">Looooooooooong Element</span>
</div>

然而,这种方法会带来错误 ELEMENT.getBoundingClientRect is not a function (运行代码片段+检查控制台)。我相信这是因为最终值传递给了我 get_elementWidth(ELEMENT) 函数(由 减少 方法)是实际的最大宽度(所以是一个数字,而不是DOM节点),但我不知道如何解决它。

1 回复 | 直到 2 年前

Nick SamSmith1986 2 年前

你不需要使用 reduce 在这里,只是 map get_elementWidth 到每个 ELEMENT 然后服用 Math.max 在所有值中。

注意您需要使用 align-items: flex-start 在容器div上;否则跨度将全部扩展到容器的宽度。

function get_elementWidth(ELEMENT) {
  const DOMrect = ELEMENT.getBoundingClientRect();
  return DOMrect.width;
}

function get_widestElement(ELEMENTS) {
  const widestElement = Math.max(...ELEMENTS.map(get_elementWidth))
  return widestElement;
}

const elements = document.querySelectorAll('.ElementGroup__element');
console.log(get_widestElement([...elements]))

.ElementGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

<div class="ElementGroup">
  <span class="ElementGroup__element">Short Element</span>
  <span class="ElementGroup__element">Short Element</span>
  <span class="ElementGroup__element">Looooooooooong Element</span>
</div>

如果你想得到最宽的元素本身,一个简单的 for 循环可能是最好的。

function get_elementWidth(ELEMENT) {
  const DOMrect = ELEMENT.getBoundingClientRect();
  return DOMrect.width;
}

function get_widestElement(ELEMENTS) {
  let maxWidth = -1
  let widestElement
  for (let ELEMENT of ELEMENTS) {
    let width = get_elementWidth(ELEMENT)
    if (width > maxWidth) {
      maxWidth = width
      widestElement = ELEMENT
    }
  }
  return { widestElement, width: maxWidth };
}

const elements = document.querySelectorAll('.ElementGroup__element');
console.log(get_widestElement([...elements]))

.ElementGroup{
显示:flex;
弯曲方向:柱;
对齐项目:弹性启动;
}

<div class=“ElementGroup”>
<span class=“ElementGroup__element”>短元素</span>
<span class=“ElementGroup__element”>短元素</span>
<span class=“ElementGroup__element”>Looooooooooong元素</span>
</div>