Как присвоить уникальный id каждому создаваемому элементу класса?

Question

[Михаил]

Есть один элемент класса. Создаю новые экземпляры с таким же классом при нажатии на кнопку с помощью JQuery. Метод .clone().appendTo(). Т.е. клонируется первый элемент , как бы прототип, и его клон вставляется в ДОМ. Надо чтобы первому созданному таким образом элементу был присвоен id=1, второму id=2 и т.д. И еще, как вариант, сделать, чтобы номер первый был 001, второй 002 и т.д.

Comments

[Павел Корнилов]

Не представляю себе задачу, в которой подобное могло бы пригодиться.
Впрочем, если очень сильно надо, то zendor дал решение.

[Михаил]

Павел Корнилов, создаются проекты. В проектах будут создаваться еще разные данные. Потом эти проекты могут удаляться, по мере необходимости. И чтобы не возникло путаницы, я думаю присваивать каждому проекту свой уникальный, фиксированный id. Чтобы не по индексу их потом искать, а по id.

[Павел Корнилов]

Михаил, при такой нужде - лучше использовать Set добавляемых элементах в какую-то базу.

[Михаил]

Павел Корнилов, да, это нужно будет сделать , для сохранения всех данных. И проектов и др. А если использовать Set, то можно обойтись без уникальных id?

[Павел Корнилов]

Михаил, да, конечно. Set сам по себе исключает дублирование включённых элементов.

[Михаил]

Zendor, спасибо! но не очень понял, как сделать...
уточню вопрос:
есть такая функция, срабатывающая при нажатии на кнопку

$(".button").click(function () {
$( ".project" ).clone().appendTo( "body" );

});

а как мне вставить Ваш код внутрь этой функции ?

[zendor]

let id = 1;
$('.button').click(function() {
  const node = $('.project').clone()[0];
  node.id = id++;
  $(node).appendTo('body');
});

[Михаил]

zendor, спасибо!

[zendor]

Михаил, Дополнил ответ, если вам необходимо чтобы id начинался с нулей.

Answer 1

[zendor]

UPD: исправил, совсем забыл что id обязательно должен начинаться с буквы.

let id = 1;

$('.button').click(function() {
  const node = $('.project').clone()[0];
  node.id = `id${id++}`;
  $(node).appendTo('body');
});

Если нужно чтобы id был вида 'id001' тогда:

function pad(v) {
  return 'id' + ('00' + v).slice(-3);
}

let id = 1;

$('.button').click(function() {
  const node = $('.project').clone()[0];
  node.id = pad(id++);
  $(node).appendTo('body');
});