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

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

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

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

Сообщите мне, есть ли у вас какие-либо решения. Благодаря, Carson

Ответ 1

Вы можете просто использовать переменную идентификатора, как это:

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

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

Ответ 2

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

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

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

$("<div class='someDivConntet'></div>").insertAfter($(this)).uniqueId();

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

Ответ 3

$(function(){
    var pcount = icount = 0;

    $('<div/>', {
       id:   'product' + pcount++
    }).append($('<input/>', {
       id:   'input' + icount++
    })).append($('<input/>', {
       id:   'input' + icount++
    })).appendTo(document.body);
});

Ответ 4

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

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

Ответ 5

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

$.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% возможности, но это возможно), а затем меняет идентификатор.

Ответ 6

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

var x = 1;
var wrapper = $('.field_wrapper'); //Input field wrapper your div Add in this Class


var fieldtext = '<div ID="product_'+x+'"><label id="label_'+x+'" for="field_'+x+'"></label><input type="text" id="field_'+x+'" name="field_'+x+'" value=""/></div>'; //New input field html 

$(wrapper).append(fieldtext); // Add field html
x++;