Создание динамического div с уникальными идентификаторами – jQuery

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

Я должен был нажать кнопку, которая говорит «добавить продукт», и каждый раз создавать уникальный div. Например, первый div будет иметь id # product1, затем # product2 и т. Д.

Очень сложная часть состоит в том, чтобы иметь два поля ввода в div, как обычные текстовые входы. Они также должны иметь уникальные идентификаторы, поэтому я могу использовать то, что помещено в них.

Дайте мне знать, если у вас есть какие-либо решения. Спасибо, Карсон

Вы можете просто использовать переменную ID переменной, например:

var i = 1; $("#addProduct").click(function() { $("
", { "class":"wrapper", id:"product"+i }) .append($("", { type: "text", id:"name"+i })) .append($("", { type: "text", id:"property"+i })) .appendTo("#someContainer"); i++; });

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

ОК. Это действительно старая должность, но я подумал, что это может помочь, если у вас есть аналогичная проблема. Я наткнулся на .uniqueId () в jQuery ( см. Здесь ).

Он проверяет, имеет ли элемент уже идентификатор или нет, а если нет, он присваивает ему уникальный идентификатор. Недостатком является то, что у вас не может быть «пользовательского имени» (например, product_1, product_2 и т. Д.). Идентифицированный идентификатор – это что-то вроде ui-id-1, ui-id-2 и т. Д.

Чтобы назначить уникальный идентификатор, вы можете сделать что-то вроде этого –

 $("
").insertAfter($(this)).uniqueId();

Просто убедитесь, что у вас уже нет идентификатора элемента.

 $(function(){ var pcount = icount = 0; $('
', { id: 'product' + pcount++ }).append($('', { id: 'input' + icount++ })).append($('', { id: 'input' + icount++ })).appendTo(document.body); });

Как правило, вам не нужно использовать идентификаторы таким образом.

После того, как вы создали новый элемент с помощью Javascript, у вас уже есть объект, который вы можете передать, в функции и т. Д. Вам, конечно, не нужно передавать идентификатор только для того, чтобы вы могли передать его в document.getElementByID()

Я использую тот, который я сделал

 $.fn.uniqueId = function(idlength){ var charstoformid = '_0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split(''); if (! idlength) idlength = 10; var getId = function() { var uniqid = ''; for (var i = 0; i < idlength; i++) { uniqid += charstoformid[Math.floor(Math.random() * charstoformid.length)]; } return uniqid; } return $(this).each(function(){ var id = getId() while ( $("#"+id).length ) { id = getId(); } $(this).attr("id", id); }); } 

Он имеет функцию генерации цепочек случайных цепочек, а затем убеждается, что сгенерированный уникальный (имеет 0,000001% возможности - но это возможно), а затем измените идентификатор.

Вы можете использовать Просто увеличивайте переменную и добавьте ее для создания уникального идентификационного кода DIV Как и Bellow

 var x = 1; var wrapper = $('.field_wrapper'); //Input field wrapper your div Add in this Class var fieldtext = '
'; //New input field html $(wrapper).append(fieldtext); // Add field html x++;