Javascript 更改id的更好方法&x27；使用jquery的控件类型

我有以下从django model_表单集中呈现的表单。它从一个表单和一些静态控件（如日期等）开始

<form action="/customer/images/1/upload_xray" method="post" id="xrayform" enctype="multipart/form-data">
    <input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="1"><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0"><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000">
    <input type="hidden" name="csrfmiddlewaretoken" value="LI1L39J1C7P4tQeqfJhL5CBuW283FmOI">
    <div class="form-group">
        <label for="date">Date</label>
        <input id="date" type="text" name="date" class="form-control input-sm datepicker input-append date" readonly="">
    </div>
    <div class="form-group">
        <label for="id_title">Title</label>
        <select class="form-control input-sm" id="id_title" name="title">
            <option value="" selected="selected">---------</option>
            <option value="Observation">Observation</option>
            <option value="Initial">Initial</option>
            <option value="Progress">Progress</option>
            <option value="Final">Final</option>
            <option value="Post Treatment">Post Treatment</option>
        </select>
    </div>
    <hr class="divider">
    <div class="form-wrapper">
        <div class="form-group">
            <label for="id_form-0-image">Image</label>
            <input id="id_form-0-image" name="form-0-image" type="file">
        </div>
        <div class="form-group">
            <label for="id_form-0-type">Type</label>
            <select class="form-control input-sm" id="id_form-0-type" name="type">
                <option value="" selected="selected">---------</option>
                <option value="xray">X-ray Image</option>
                <option value="internal">Intraoral Image</option>
                <option value="external">Extra-oral Image</option>
                <option value="model">Model</option>
            </select>
        </div>
        <div class="form-group">
            <label for="id_form-0-desc">Desc</label>
            <select class="form-control input-sm" id="id_form-0-desc" name="form-0-desc">
                <option value="" selected="selected">---------</option>
                <optgroup label="Xray" />
                <option value="PA Ceph">PA Ceph</option>
                <option value="Lateral Ceph">Lateral Ceph</option>
                <option value="Panoramic">Panoramic</option>
                <optgroup label="Interior oral">
                <option value="Anterior Occlution">Anterior Occlution</option>
                <option value="Anterior Occlusion Relaxed">Anterior Occlusion Relaxed</option>
                <option value="Overjet Right">Overjet Right</option>
                <option value="Overjet Left">Overjet Left</option>
                <option value="Right Occlusion">Right Occlusion</option>
                <option value="Left Occlusion">Left Occlusion</option>
                <option value="Upper Occlusal">Upper Occlusal</option>
                <option value="Lower Occlusal">Lower Occlusal</option>
                <optgroup label="External oral" />
                <option value="Frontal">Frontal</option>
                <option value="Lateral Right">Lateral Right</option>
                <option value="Lateral Left">Lateral Left</option>
                <option value="Oblique smile Right">Oblique smile Right</option>
                <option value="Oblique smile Left">Oblique smile Left</option>
                <option value="Frontal smile">Frontal smile</option>
                <option value="Oblique Right">Oblique Right</option>
                <option value="Oblique Left">Oblique Left</option>
                <optgroup label="Model"/>
                <option value="Model Upper Occlusal">Model Upper Occlusal</option>
                <option value="Model Lower Occlusal">Model Lower Occlusal</option>
                <option value="Model Right Buccal">Model Right Buccal</option>
                <option value="Model Left Buccal">Model Left Buccal</option>
                <option value="Model Anterior Dental">Model Anterior Dental</option>
            </select>
        </div>
    </div>                        
</form>
<div class="row">
    <button class="btn btn-sm btn-success pull-right" id="add-form">+</button>
</div>

基本上，我会使用formwrappers来知道有多少个表单，然后使用每个子级（表单组）和每个子级（控制元素）并更改它们的id。在速度上还没有任何问题，它工作得很好，但不喜欢它的清洁

您可以像这样使用.attr（）

---

演示：

Nice，谢谢，这可以为表单组控件完成，对吗？@Apostolos是的，它可以是$（表单组）.children（）.attrs（'id'，函数（索引，项）{}）；

$(document).on('click','.delete', function (e){
    e.preventDefault();
    var forms;
    var index = parseInt($(this).prop('id')) - 1;        
    var formWrapper = $(".form-wrapper")[index];        
    formWrapper.remove();
    forms = $(".form-wrapper");
    $("#id_form-TOTAL_FORMS").val(parseInt($("#id_form-TOTAL_FORMS").val()) - 1);
    forms = $('.form-wrapper');
    forms.each(function (index, item){
        var form_groups = $(item).children('.form-group');
        form_groups.each(function (index2, item2){
            controls =  $(item2).children();
            controls.each(function(index3, item3){
                var id = $(item3).prop('id');
                parts = id.split('-');
                parts[1] = String(index);
                id = parts.join('-');
            });
        });
    });
    $('button.delete').each(function(index, item){
        var id = parseInt($(item).prop('id'));            
        id = index + 2; //First start button starts with id=2 as in "delete 2nd form"
        console.log('id after '+id);
        $(item).prop('id', id);
    });
});

$('button.delete').attr('id', function (index, item) {
    return index + 2;
});