尝试将两个 querySelectorAll 项目添加到 JavaScript 中的 forEach 循环答案

【问题标题】：trying to add two querySelectorAll items to a forEach loop in JavaScript尝试将两个 querySelectorAll 项目添加到 JavaScript 中的 forEach 循环
【发布时间】：2021-10-24 04:46:12
【问题描述】：

我一直在尝试将 newText.innerText 应用于 oldText.innerText，它只需要 newText 中的最后一个元素并将其应用于所有 oldText 我尝试将索引和数组添加到循环中并在将它们添加为数字计数器后运行代码但它仍然不起作用，我还尝试定义一个新元素并将 newText 值分配给它但它仍然不起作用

      <body>
        <h3 class="oldText">oldText</h3>
        <h3 class="oldText">oldText</h3>
        <h3 class="oldText">oldText</h3>
        <h3 class="oldText">oldText</h3>
        <h3 class="oldText">oldText</h3>
    
        <h3 class="newText">newText1</h3>
        <h3 class="newText">newText2</h3>
        <h3 class="newText">newText3</h3>
        <h3 class="newText">newText4</h3>
        <h3 class="newText">newText5</h3>
        
<script> 

    var oldText = document.querySelectorAll('.oldText')
    var newText = document.querySelectorAll('.newText')
    oldText.forEach((oldT) => {
      newText.forEach((newT) => {
      oldT.innerText = newT.innerText
      })
    })

</script>
      </body>
    </html>

当我试图让 oldText 具有相同的 innerText 时

【问题讨论】：

标签： javascript foreach

【解决方案1】：

您可以像这样简单地使用 for 循环，而不是使用 foreach 循环：

var oldText = document.querySelectorAll('.oldText')
var newText = document.querySelectorAll('.newText')
for (var i = 0; i < oldText.length; i++){
  oldText[i].innerText = newText[i].innerText;
}

【讨论】：

非常感谢这个解决方案，它真的很有帮助

【解决方案2】：

你不应该有一个嵌套循环。只需循环遍历每个oldText 元素并将其.innerText 分配给对应newText 元素的.innerText：

var oldText = document.querySelectorAll('.oldText')
var newText = document.querySelectorAll('.newText')
oldText.forEach((oldT, i) => {
  oldT.innerText = newText[i].innerText
})

i 是newText 数组的索引。

【讨论】：

非常感谢这个解决方案，它真的很有帮助