forEach 里面的 forEach 有条件吗？答案

【问题标题】：forEach inside forEach with a condition?forEach 里面的 forEach 有条件吗？
【发布时间】：2021-07-30 10:52:49
【问题描述】：

我有两个列表，我想检查列表 B 是否包含列表 A 中的项目，因此我创建了一个按钮来触发 forEach 以检查列表 B 的任何元素的 innerText 是否与列表 A 中的元素相似：

    let itemsFromA = document.querySelectorAll('.itemA')
    let listB = document.getElementById('listB')

    listB.childNodes.forEach(childNodes => {
        if (childNodes.innerText === itemsFromA.forEach(itemsFromA => itemsFromA.innerText)) {
            childNodes.style.display = 'none'
        }
    })
}

但是什么也没发生。我该如何解决这个问题？

谢谢？？？？？？

【问题讨论】：

你能在 HTML 中展示你的按钮是如何设置的吗？

标签： javascript html arrays loops foreach

【解决方案1】：

NodeList.forEach() 不返回任何内容（或始终返回 undefined）。使用Array.from() 将itemsFromA 转换为数组，并使用Array.some() 检查是否有任何项目具有相同的innerText：

let itemsFromA = document.querySelectorAll('.itemA')
let listB = document.getElementById('listB')

listB.childNodes.forEach(node => {
  if (Array.from(itemsFromA).some(itemsFromA => itemsFromA.innerText === node.innerTex)) {
    node.style.display = 'none'
  }
})

【讨论】：

【解决方案2】：

这是因为forEach 循环不返回值。使用 map 而不是 forEach 来获得预期的行为。

例如：

if (childNodes.innerText === itemsFromA.map(itemsFromA => itemsFromA.innerText))

【讨论】：

【解决方案3】：

forEach 不返回任何值，它只会循环遍历数组。你应该改用 find 函数

`让 itemsFromA = document.querySelectorAll('.itemA') 让 listB = document.getElementById('listB')

listB.childNodes.forEach(childNode => {
    if (itemsFromA.find(itemsFromA => itemsFromA.innerText == childNode.innerText)) {
        childNodes.style.display = 'none'
    }
})

}`

【讨论】：

【解决方案4】：

试试这个方法：

  let itemsFromA = document.querySelectorAll('.itemA')
  let listB = document.getElementById('listB')

  list = listB.childNodes.map((index, childNodes) => {
      itemsFromA.forEach(itemsFromA => {
        if (childNodes.innerText === itemsFromA.innerText)
           childNodes.style.display = 'none'
      })
    })
}

【讨论】：

【解决方案5】：

您可以使用 some 而不是 forEach（它不会返回任何内容，因此您的代码无法正常工作..）。

some 将测试数组中的至少一个元素是否通过了提供的函数实现的测试。

let itemsFromA = document.querySelectorAll('.itemA')
let listB = document.getElementById('listB')

new_list = listB.childNodes.map((index, childNodes) => {
    if (itemsFromA.some(item => item.innerText === childNodes.innerText)) {
        childNodes.style.display = 'none'
    }
})

【讨论】：