Использование Javascript для генерации уникальных идентификаторов для Div тегов (HTML)

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 все идентификаторы должны быть уникальными, как я могу указать Javascript для создания уникального идентификатора для каждого результата?

Answer 1

использование счетчика в качестве глобальной переменной и добавить, что ваш идентификатор и приращения счетчика после присвоения идентификатора, как показано ниже:

<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

Просто используйте индекс цикла 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 3

Вы можете сделать функция 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 4

Вы можете сделать это, указав глобальную переменную count, увеличив ее и добавив вместе с идентификатором div.

<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> 

Не проверял, а просто попробовал.

Answer 5

В целом, создание динамических идентификаторов, а затем поиск соответствующих элементов позже с помощью 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).