javascript：使用reduce()方法確定最寬的DOM元素？-有解無憂

我正在嘗試使用 Javascriptreduce()方法在一組 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)（通過方法）傳遞給我的函式的最終值reduce()是實際最大寬度（所以是數字而不是 DOM 節點），但我不知道如何解決它。

uj5u.com熱心網友回復：

您不需要在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 {
  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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522735.html

標籤：javascriptdom减少

上一篇：使用DOM洗掉特定生成的div

下一篇：為什么document.getElementById()在VSCode中不起作用？