时间戳

首页 > 解决方案 > 如何通过 HTML 集合映射并向每个集合添加动态元素？

javascript - 如何通过 HTML 集合映射并向每个集合添加动态元素？

问题描述

我想通过一个 HTML 集合数组进行映射。

let mainElem = Array.from(document.getElementsByClassName('ant-upload-list-picture-card-container'))

并向数组中的每个项目添加另一个元素。

我试图遍历它们中的每一个。它工作正常，但元素 emptydiv 仅附加在最后一项

Array.prototype.map.call(mainElem, (tag, i) => {
         emptyDiv.classList.add(`dynamicClass_${i}`)
                
                if (i === 0) {
                    emptyDiv.classList.add('dynamic_active_class');
                }
                else {
                    emptyDiv.classList.add('dynamic_inactive_class');
                }
                tag.appendChild(emptyDiv);
        })

标签： javascriptsimple-html-dom

解决方案

emptyDiv在每次迭代中指向相同的元素，这意味着您将其附加到一个索引，在下一个索引中，您从前一个索引中获取它，并附加到当前索引。

如果要将空 div 附加到每个索引，则必须在每次迭代时创建一个新元素：

Array.prototype.map.call(mainElem, (tag, i) => {

     const emptyDiv=document.createElement("div")

     emptyDiv.classList.add(`dynamicClass_${i}`)
            
            if (i === 0) {
                emptyDiv.classList.add('dynamic_active_class');
            }
            else {
                emptyDiv.classList.add('dynamic_inactive_class');
            }
            tag.appendChild(emptyDiv);
    })

推荐阅读