JQuery - изменить атрибуты нескольких клонированных элементов

Question

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

В принципе, у меня есть элементы формы, которые можно перетаскивать и опускать - он использует клон. Это позволяет мне создавать свои собственные формы. Проблема заключается в том, выход может быть что-то вроде так

<form id="content"> 

    <div data-type="text" class="form-group"> 
    <label class="control-label col-sm-5" for="text_input">Text Input</label> 
    <div class="controls col-sm-7"> 
     <input type="text" name="text_input" class="form-control" id="text_input"> 
    </div> 
    </div> 

    <div data-type="text" class="form-group"> 
    <label class="control-label col-sm-5" for="text_input">Text Input</label> 
    <div class="controls col-sm-7"> 
     <input type="text" name="text_input" class="form-control" id="text_input"> 
    </div> 
    </div> 

    <div data-type="textarea" class="form-group"> 
    <label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label> 
    <div class="controls col-sm-7"> 
     <textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea> 
    </div> 
    </div> 

    <div data-type="textarea" class="form-group"> 
    <label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label> 
    <div class="controls col-sm-7"> 
     <textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea> 
    </div> 
    </div> 

    <div data-type="date" class="form-group"> 
    <label class="control-label col-sm-5" for="dateInput">Date Input:</label> 
    <div class="col-sm-3"> 
     <input type="text" name="dateInput" class="form-control date_picker" id="dateInput"> 
    </div> 
    </div> 

    <div data-type="date" class="form-group"> 
    <label class="control-label col-sm-5" for="dateInput">Date Input:</label> 
    <div class="col-sm-3"> 
     <input type="text" name="dateInput" class="form-control date_picker" id="dateInput"> 
    </div> 
    </div> 

    <input type="submit" value="Save Template" id="templateSubmit" class="btn btn-primary"> 
</form> 

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

Я создал скрипку здесь Fiddle Если вы нажмете «Сохранить шаблон», вы увидите, что произойдет. Номера идентификаторов кажутся очень странными, например textareaInput222. Действительно, каждый тип элемента должен начинаться с 0 и 1 добавлять к нему для каждого дополнительного элемента того же типа.

Возможно ли это? Другая вещь, с которой я борюсь, - установить метки элементов для атрибута так же, как имя, которое установлено для этого элемента.

Как я могу это достичь?

Благодаря

Answer 1

$("#content").find(".form-group").each(function() { 

$("textarea").each(function(index, value) { 

мой друг, эти два являются причиной. Есть около 6 элементов .form-group, так что textarea # каждый запускал 6 раз. И что касается DRY, здесь я дал свою версию https://jsfiddle.net/yjaL2zgL/2/

Answer 2

Я хотел бы использовать уникальную функцию ID underscore.js лично вами, или собственную реализацию этого и суффикс каждый идентификатор с уникальным номером на странице, что приращение как «dateInput-345». Даже просто использовать переменную счетчика, которую все используют, было бы достаточно просто, а не основывать ее на индексах в циклах.

http://underscorejs.org/#uniqueId

свой собственный счетчик: вместо использования

(index + 1) 

вы можете использовать что-то вроде

var uid = 0; //this needs to be where you declared your other vars 

тогда, когда вам нужен ID:

var new_id = $(value).attr("id") + '-' + uid++; 

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