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

Question

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

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

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

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

Answer 1

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

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++;
});

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

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

Вы можете использовать Просто увеличьте переменную и добавьте для создания уникального кода DIV ID, как 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++;

Answer 6

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

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