克隆html并为必需属性提供唯一ID

Question

$(document).ready(function() {
  $(".pd_add").click(function() {
    var newpd = $(".pdclone").html();
    $(".pdincrement").after(newpd);
    $(newpd).find('input[type=text]:nth-child(1)').attr("required", "required");
    $(newpd).find('input[type=file]:nth-child(1)').attr("required", "required");
    $(newpd).find('input[type=select]:nth-child(1)').attr("required", "required");
    $(newpd).find('input[type=select]:nth-child(1)').attr("id", Math.floor(Math.random() * 100));
    //    $(newpd).insertAfter(".pdclone:last");
  });
  $("body").on("click", ".pd_remove", function() {
    $(this).parents(".pdcontrol").remove();
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-me-12">
  <div class="input-group control-group pdincrement">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group has-feedback">
          <label for="pdtype[]">Document Type<span class="text-danger">*</span>                                         
          <i class="fa fa-question-circle" data-toggle="tooltip"
                                                   data-placement="top" title=""
                                                   data-original-title="Please Select Document type"></i>
                                            </label>
          <br>
          <select name="pdtype[]" id="pd_1" required="true">
            <option value="citizenship">citizenship</option>
            <option value="license">license</option>
            <option value="passport">passport</option>
          </select>
        </div>
      </div>

      <div class="col-md-3">
        <div class="form-group has-feedback">
          <label for="pddocument[]">Document<span class="text-danger">*</span></label>
          <i class="glyphicon glyphicon-open-file form-control-feedback" data-toggle="tooltip" data-placement="top" title="Select Document" data-original-title="Please Select Document"></i>
          <input type="file" required class="form-control" accept=".jpeg, .jpg, .png, .pdf, .doc, .docx" name="pddocument[]" placeholder="Browse Document">
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group has-feedback">
          <label for="pdremarks">Remarks<span class="text-danger">*</span></label>
          <input autofocus type="text" class="form-control" name="remarks[]" placeholder="Remarks" value="" required minlength="2" maxlength="255">
          <span class="fa fa-info form-control-feedback"></span>
        </div>
      </div>
      <div class="col-md-1"><label> </label><span><br></span>
        <button class="btn btn-success pd_add" id="pd_add" type="button"><i
                                                    class="glyphicon glyphicon-plus"></i>Add</button>
      </div>
    </div>
  </div>


  <!-- This is hidden    -->
  <div class="pdclone hide ">
    <div class="row control-group input-group pdcontrol" style="margin-top:10px">
      <div class="col-md-4">
        <div class="form-group has-feedback">
          <label for="pdtype[]">Document Type<span class="text-danger">*</span>
                                                <i class="fa fa-question-circle" data-toggle="tooltip"
                                                   data-placement="top" title=""
                                                   data-original-title="Please Select Document type"></i>
                                            </label><br>
          <select name="pdtype[]" id="pd_1" required="true">
            <option value="citizenship">citizenship</option>
            <option value="license">license</option>
            <option value="passport">passport</option>
          </select>

        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group has-feedback">
          <label for="pddocument[]">Document<span class="text-danger">*</span></label>
          <i class="glyphicon glyphicon-open-file form-control-feedback" data-toggle="tooltip" data-placement="top" title="Select Document" data-original-title="Please Select Document"></i>
          <input type="file" required="false" class="form-control" accept=".jpeg, .jpg, .png, .pdf, .doc, .docx" name="pddocument[]" placeholder="Browse Document">
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group has-feedback">
          <label for="pdremarks[]">Remarks<span class="text-danger">*</span></label>
          <input autofocus type="text" id="pdremarks_1" class="form-control" name="pdremarks[]" placeholder="Remarks" value="" required="false" minlength="2" maxlength="255">
          <span class="fa fa-info form-control-feedback"></span>
        </div>
      </div>
      <div class="col-md-1">
        <label> </label><span><br></span>
        <button class="btn btn-danger pd_remove" type="button"><i
                                                    class="glyphicon glyphicon-remove"></i>Remove</button>
      </div>
    </div>
  </div>
</div>

我只知道javascript的基础知识。我正在创建一个表单来获取用户输入，就像文档类型，备注和文档（文件）。我一次使用clone来获取多个文档，并且难以对克隆元素进行验证。在不更改id的情况下，select2不起作用，因此我想将克隆元素的id和required字段从false更改为true。可能吗？这是我的代码：

  <div class="modal-body">
    <form novalidate id="entryForm" action="{{URL::Route('client.pd_store')}}" method="post"
          enctype="multipart/form-data">
        <div class="box-body">
            @csrf
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="id" value="{{$client->id}}">

            {{--repeating from here--}}
            <div class="input-group control-group pdincrement">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group has-feedback">
                            <label for="pdtype[]">Document Type<span class="text-danger">*</span>
                                <i class="fa fa-question-circle" data-toggle="tooltip"
                                   data-placement="top" title=""
                                   data-original-title="Please Select Document type"></i>
                            </label>
                            <br>
                            {!! Form::select('pdtype[]', $pd, '' , ['id'=>'two','class' => 'form-control select2', 'required' => 'true']) !!}
                            {!! Form::select('pdtype[]', $pd, '' , ['id'=>'five','class' => 'form-control select2', 'required' => 'true']) !!}
                            <span class="text-danger">{{ $errors->first('pdtype[]') }}</span>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group has-feedback">
                            <label for="pddocument[]">Document<span class="text-danger">*</span></label>
                            <i class="glyphicon glyphicon-open-file form-control-feedback"
                               data-toggle="tooltip"
                               data-placement="top" title="Select Document"
                               data-original-title="Please Select Document"></i>
                            <input type="file" required class="form-control"
                                   accept=".jpeg, .jpg, .png, .pdf, .doc, .docx" name="pddocument[]"
                                   placeholder="Browse Document">
                            <span class="text-danger">{{ $errors->first('pddocument[]') }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group has-feedback">
                            <label for="pdremarks">Remarks<span class="text-danger">*</span></label>
                            <input autofocus type="text" class="form-control" name="remarks[]"
                                   placeholder="Remarks" value="{{old('pdremarks[]')}}" required
                                   minlength="2"
                                   maxlength="255">
                            <span class="fa fa-info form-control-feedback"></span>
                            <span class="text-danger">{{ $errors->first('pdremarks[]') }}</span>
                        </div>
                    </div>
                    <div class="col-md-1"><label> </label><span><br></span>
                        <button class="btn btn-success pd_add" id="pd_add" type="button"><i
                                    class="glyphicon glyphicon-plus"></i></button>
                    </div>
                </div>
            </div>


            {{--hidden div  --}}
            <div class="pdclone hide ">
                <div class="row control-group input-group pdcontrol" style="margin-top:10px">
                    <div class="col-md-4">
                        <div class="form-group has-feedback">
                            <label for="pdtype[]">Document Type<span class="text-danger">*</span>
                                <i class="fa fa-question-circle" data-toggle="tooltip"
                                   data-placement="top" title=""
                                   data-original-title="Please Select Document type"></i>
                            </label><br>
                            {!! Form::select('pdtype[]', $pd, '' , ['required'=>'false','id'=>'pdtype_1','class' => 'form-control select2']) !!}
                            <span class="text-danger">{{ $errors->first('pdtype[]') }}</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group has-feedback">
                            <label for="pddocument[]">Document<span class="text-danger">*</span></label>
                            <i class="glyphicon glyphicon-open-file form-control-feedback"
                               data-toggle="tooltip"
                               data-placement="top" title="Select Document"
                               data-original-title="Please Select Document"></i>
                            <input type="file" required="false" class="form-control"
                                   accept=".jpeg, .jpg, .png, .pdf, .doc, .docx" name="pddocument[]"
                                   placeholder="Browse Document">
                            <span class="text-danger">{{ $errors->first('pddocument[]') }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group has-feedback">
                            <label for="pdremarks[]">Remarks<span class="text-danger">*</span></label>
                            <input autofocus type="text" id="pdremarks_1" class="form-control"
                                   name="pdremarks[]"
                                   placeholder="Remarks" value="{{old('pdremarks[]')}}" required="false"
                                   minlength="2"
                                   maxlength="255">
                            <span class="fa fa-info form-control-feedback"></span>
                            <span class="text-danger">{{ $errors->first('pdremarks[]') }}</span>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <label> </label><span><br></span>
                        <button class="btn btn-danger pd_remove" type="button"><i
                                    class="glyphicon glyphicon-remove"></i></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- /.box-body -->
        <div class="box-footer">

            <button type="submit" class="btn btn-info pull-right upload-image"><i
                        class="fa fa-plus-circle "></i>
                Upload Document
            </button>
            <a href="#" class="btn btn-default" data-dismiss="modal" aria-label="Close">Cancel</a>

        </div>
    </form>


</div>

//这里是javascript代码

<script type="text/javascript">
    $(document).ready(function () {
        $(".pd_add").click(function () {

            var newpd = $(".pdclone").html();
            $(".pdincrement").after(newpd);
            $(newpd).find('input[type=text]:nth-child(1)').attr("required","required");
            $(newpd).find('input[type=file]:nth-child(1)').attr("required","required");
            $(newpd).find('input[type=select]:nth-child(1)').attr("required","required");
            $(newpd).find('input[type=select]:nth-child(1)').attr("id",Math.floor(Math.random() * 100));
            $(newpd).insertAfter(".pdclone:last");

        });

        $("body").on("click", ".pd_remove", function () {
            $(this).parents(".pdcontrol").remove();
        });
        Generic.initCommonPageJS();
    });
</script>

我的界面看起来像这样

Answer 1

我在代码中更改了许多内容以使其正常工作：

• 用:nth-child(1)替换:eq(0)来查找文本和文件输入。
• 用input[type=select]:nth-child(1)替换select:first-of-type找到您的选择。
• 添加了一个计数器，以便知道下一个ID是什么。每次附加表单块时它都会增加。

$(document).ready(function() {
  let count = 1;

  $(".pd_add").click(function() {
    let $newpd = $($(".pdclone").html());
    
    $(".pdincrement").after($newpd);
    
    $newpd.find('input[type=text]:eq(0)').prop("required", true);
    $newpd.find('input[type=file]:eq(0)').prop("required", true);
    $newpd.find('select:first-of-type').prop("required", true);
    $newpd.find('select:first-of-type').attr("id", `pd_${count + 1}`);
    
    count++;
  });
  
  $("body").on("click", ".pd_remove", function() {
    $(this).parents(".pdcontrol").remove();
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-me-12">
  <div class="input-group control-group pdincrement">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group has-feedback">
          <label for="pdtype[]">Document Type<span class="text-danger">*</span>                                         
          <i class="fa fa-question-circle" data-toggle="tooltip"
                                                   data-placement="top" title=""
                                                   data-original-title="Please Select Document type"></i>
                                            </label>
          <br>
          <select name="pdtype[]" id="pd_1" required="true">
            <option value="citizenship">citizenship</option>
            <option value="license">license</option>
            <option value="passport">passport</option>
          </select>
        </div>
      </div>

      <div class="col-md-3">
        <div class="form-group has-feedback">
          <label for="pddocument[]">Document<span class="text-danger">*</span></label>
          <i class="glyphicon glyphicon-open-file form-control-feedback" data-toggle="tooltip" data-placement="top" title="Select Document" data-original-title="Please Select Document"></i>
          <input type="file" required class="form-control" accept=".jpeg, .jpg, .png, .pdf, .doc, .docx" name="pddocument[]" placeholder="Browse Document">
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group has-feedback">
          <label for="pdremarks">Remarks<span class="text-danger">*</span></label>
          <input autofocus type="text" class="form-control" name="remarks[]" placeholder="Remarks" value="" required minlength="2" maxlength="255">
          <span class="fa fa-info form-control-feedback"></span>
        </div>
      </div>
      <div class="col-md-1"><label> </label><span><br></span>
        <button class="btn btn-success pd_add" id="pd_add" type="button"><i
                                                    class="glyphicon glyphicon-plus"></i>Add</button>
      </div>
    </div>
  </div>


  <!-- This is hidden    -->
  <div class="pdclone hide ">
    <div class="row control-group input-group pdcontrol" style="margin-top:10px">
      <div class="col-md-4">
        <div class="form-group has-feedback">
          <label for="pdtype[]">Document Type<span class="text-danger">*</span>
                                                <i class="fa fa-question-circle" data-toggle="tooltip"
                                                   data-placement="top" title=""
                                                   data-original-title="Please Select Document type"></i>
                                            </label><br>
          <select name="pdtype[]" id="pd_1" required="true">
            <option value="citizenship">citizenship</option>
            <option value="license">license</option>
            <option value="passport">passport</option>
          </select>

        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group has-feedback">
          <label for="pddocument[]">Document<span class="text-danger">*</span></label>
          <i class="glyphicon glyphicon-open-file form-control-feedback" data-toggle="tooltip" data-placement="top" title="Select Document" data-original-title="Please Select Document"></i>
          <input type="file" required="false" class="form-control" accept=".jpeg, .jpg, .png, .pdf, .doc, .docx" name="pddocument[]" placeholder="Browse Document">
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group has-feedback">
          <label for="pdremarks[]">Remarks<span class="text-danger">*</span></label>
          <input autofocus type="text" id="pdremarks_1" class="form-control" name="pdremarks[]" placeholder="Remarks" value="" required="false" minlength="2" maxlength="255">
          <span class="fa fa-info form-control-feedback"></span>
        </div>
      </div>
      <div class="col-md-1">
        <label> </label><span><br></span>
        <button class="btn btn-danger pd_remove" type="button"><i
                                                    class="glyphicon glyphicon-remove"></i>Remove</button>
      </div>
    </div>
  </div>
</div>