Question

我有以下HTML代码：

<div id="ID_unique"></div>

<span class="a_random_class">a</span>
<span class="a_random_class">b</span>
<span class="a_random_class">c</span>

和Javascript

<script>
setTimeout(function() {

  var element = document.getElementById("An_ID");  

  Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {

    var example = element.appendChild(e.cloneNode(true));
        example.className += " timeline-date";

    var div = document.createElement('div');
        div.id = "id_frame";

    div.appendChild(example);   
    element.appendChild(div);

  });
}, 300);
</script>

它会将cloneNode的结果包装在HTML div中，而那些生成的div标记将具有相同的ID id_frame ...但是因为在HTML中所有ID必须是unique，如何告诉Javascript为每个结果生成一个唯一的ID？

Answer 1

使用counter作为全局变量，并在分配id之后将其附加到id和increment计数器，如下所示：

<script>
setTimeout(function() {

  var element = document.getElementById("An_ID");  
   var counter = 0;
  Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {

    var example = element.appendChild(e.cloneNode(true));
        example.className += " timeline-date";

    var div = document.createElement('div');
        div.id = "id_frame"+counter;
        counter++;
    div.appendChild(example);   
    element.appendChild(div);

  });
}, 300);
</script>

Answer 2

通常，构建动态ID然后在getElementById后再次找到相应的元素是一种反模式，可能会回到糟糕的旧jQuery日。相反，只需记住元素本身。在你的情况下，像

var my_divs;

setTimeout(function() {

  var element = document.getElementById("An_ID");  
  var elts    = document.querySelectorAll(".a_random_class");

  my_divs     = Array.prototype.forEach.map(elts, function(e) {
    var example = element.appendChild(e.cloneNode(true));
    example.className += " timeline-date";

    var div = document.createElement('div');
    div.appendChild(example);   
    element.appendChild(div);
    return div;

  });
}, 300);

现在，您只需引用自己创建并添加my_divs[i]的元素，而无需执行document.getElementById('id_frame'+i)之类的操作。

Answer 3

只需使用forEach循环的索引：

<script>
setTimeout(function() {

var element = document.getElementById("An_ID");  
Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e, index) {

var example = element.appendChild(e.cloneNode(true));
    example.className += " timeline-date";

var div = document.createElement('div');
    div.id = "id_frame"+index;
div.appendChild(example);   
element.appendChild(div);

});
}, 300);
</script>

Answer 4

你可以创建一个util函数：

var uniqueId = (function() {
  var counter = 0;
  return function(prefix) {
    return (prefix ? prefix : '') + (++counter);
  };
})();

console.log(uniqueId()); // 1
console.log(uniqueId()); // 2
console.log(uniqueId('my-prefix-')); // my-prefix-3

然后像这样实现：

setTimeout(function() {

  var element = document.getElementById("An_ID");  

  [].forEach.call(document.querySelectorAll(".a_random_class"), function(e) {
    var div = document.createElement('div');
    div.id = uniqueId('id_frame'); // will be id_frame1, id_frame2, id_frame3 ...

    var example = element.appendChild(e.cloneNode(true));
    example.className += " timeline-date";    

    div.appendChild(example);
    element.appendChild(div);
  });
}, 300);

Answer 5

你可以通过拥有一个全局计数变量，增加它并将它与div id名称一起添加来实现。

<script> 
var id_cnt = 0;

setTimeout(function() {
var element = document.getElementById("An_ID");  
Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {

var example = element.appendChild(e.cloneNode(true));
    example.className += " timeline-date";

var div = document.createElement('div');
    div.id = "id_frame_" + id_cnt++;

div.appendChild(example);   
element.appendChild(div);

});
}, 300);
</script>

没有测试，但只是尝试一下。

使用Javascript为div标签生成唯一ID（html）

5 个答案: