Javascript for-of 遍历数组并将值传递到 ul 上的 for-of 循环

Question

我有 ul 个项目显示在表单下的页面上。

我想在提交表单时在每一行中添加一个 link。我有一个 links 的数组我想要一个方法循环遍历数组并循环遍历 li，本质上是在每个 li 上迭代地设置属性。

我正在使用的代码是通过使用操作挂钩（因为它是一个 wordpress 站点）并在操作挂钩回调函数中返回以下内容来监视提交：

(function(){ 
var links = ['link1', 'link2', 'link3'];  
var parentList = document.querySelector('.support-list'); 
var listItems = parentList.querySelectorAll('a');  

for(var listItem of listItems){ 
    for( var link of links){ 
         listItem.href = link; 
        } 
    }
 })()

到目前为止我只能传入第一个link，我没有遍历数组，而是遍历li。

Answer 1

也许最好解释一下你的问题。但是，我看到您的 listItems 将始终具有 href 'link3' 那是因为在内部循环中您更改了 link 3 次并停在最后一个 'link3'.

也许这就是你想做的事

listItems.forEach(function(item,index){
 item.href = links[index % 3]; 
//modulus is used in case you have more than three items, otherwise it is not really needed but wont cause any trouble.
})

Answer 2

当您使用这样的嵌套循环时，您将每个 listItem 的 href 设置为每个 link。如果您想将每个 listItem 的 href 设置为相应的 link，您应该只使用一个循环，其中对两个集合使用相同的索引。

for (var i = 0; i < listItems.length; i++) {
    listItems[i].href = links[i];
}

Javascript for-of 遍历数组并将值传递到 ul 上的 for-of 循环

Javascript for-of loop over array and pass values into for-of loop over ul

javascript

arrays

loops

nested-loops

dom-traversal

Javascript for-of 遍历数组并将值传递到 ul 上的 for-of 循​​环

Javascript for-of loop over array and pass values into for-of loop over ul

javascript

arrays

loops

nested-loops

dom-traversal

Javascript for-of 遍历数组并将值传递到 ul 上的 for-of 循环