有没有办法为通过克隆节点创建的项目分配唯一的 ID？

问题描述

我正在根据浏览器窗口的大小创建一个网格。 javascript 正确构建了网格，但是我无法定位单个元素，因为没有一个元素带有 ID 类。有没有办法在“克隆”时分配它？

主体包含以下内容，克隆针对列表类。在每个列表类中都有一个带有由 CSS 生成的圆圈的 div 类。理想情况下，我可以同时定位列表类和其中的 div 类。

<div class="gallery">
  <h1>Dot Dot Dot Test</h1>
  <ul class="gallery__list span1">
    <li class="center repeat">
    <div class="circle">
    </div>
    </li>
  </ul>
<h1>That's All Folks!</h1>

这是我想在构建网格时自动生成唯一 ID 的 javascript。

<script>
        var w = window.innerWidth;
        var h = window.innerHeight;
        var numberOfColumns = Math.round(w/40);
        var numberOfRows = Math.round((h-200)/40);
        var numberOfDots = numberOfColumns * numberOfRows;
    function backgroundDots(node,count,deep) {
        for (var i = 0,copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy,node);

    }
}

backgroundDots(document.querySelector('.repeat'),numberOfDots,true);


    
    </script>

非常感谢任何帮助。已经尝试和搜索了一段时间，但似乎无法解决问题。

谢谢，

罗布

解决方法

不确定我是否理解正确，但您可以在将其插入 DOM 之前设置一个 id（或任何其他属性）。类似的东西：

  ...
  copy = node.cloneNode(deep);
  copy.id = `id-${i}`;
  node.parentNode.insertBefore(copy,node);
  ...

clonenode javascript