在JavaScript中为每个列表项迭代一个aray

Question

我正在使用一个我无法控制HTML的电子商务页面.我正在尝试为每个列表项(swatch)添加价格.

   // This is some hidden HTML being displayed on the page that has altered prices in it.

   const superAttributesRaw = [...document.querySelectorAll('.super-attribute-select option')];
   const superAttributes = superAttributesRaw.filter(newValue => Object.keys(newValue).length !== 0);

   // This is the shown HTML swatch I need to add the altered prices to.

   const swatchUl = [...document.querySelectorAll('.swatchesContainer ul li')];

   // Pulling out the altered prices and putting them into an array.

   prices = [];
   for (let value of superAttributes) {
       prices.push(value.config.price);
   }

   // This adds the sample text where I need it in the unordered list of swatches. I just need 'test' to be the altered prices.

   for (let value of swatchUl) {
       value.insertAdjacentHTML('beforeend', '<span>' + 'test' + '</span>');
   }

我的价格数组如下:

prices = ["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-2","0","0","0","0","0","0","0"]

如果"测试"在第二个for循环中,我需要以某种方式显示价格.我不确定如何让它迭代价格循环中的每个项目并以正确的顺序显示第1,第2,第3等.

我尝试嵌套for循环,它变得一团糟.如果不明显的话,我的术语非常糟糕,所以我很难用谷歌搜索我需要的东西.任何帮助表示赞赏.谢谢!

Answer 1

如果确保swatchUl数组中的索引与price数组中的价格相对应,则可以:

swatchUl.forEach((swatch, index) => {
    swatch.insertAdjacentHTML('beforeend', '<span>' + prices[index] + '</span>');
})