jQuery递增克隆的元素而不是克隆的div [英] jQuery incrementing a cloned elements instead of cloned div

问题描述

我有这个HTML脚本，其中包含一个下拉列表和一个文本框，我只需要克隆这两个而不是整个div，然后将数据发送到AJAX，每个包含文本框的下拉列表将形成一个

 < div class =col，这个数组应该作为表格中的单行添加， -sm-4 roundedstyle =background-color：＃D3D3D3> 
< div class =row clonedInputid =clonedInput1> 
< div class =col-sm-6> 
< label for =diagnosis_data>药物服务< / label> 
< fieldset class =form-group> 
 < option value =choose>选择< / option> 
< / select> 
< / fieldset> 
<！ -  End class =col-sm-6 - > 
< / div> 
< div class =col-sm-6> 
< label for =medication_quantity>数量< / label> 
< fieldset class =form-group> 
< input type =numberclass =form-controlname =medication_quantityid =medication_quantity> 
< / fieldset> 
<！ -  End class =col-sm-6 - > 
< / div> 
<！ -  End class =col-sm-6 - > 
< / div> 
< div class =actions pull-right> 
< button class =btn btn-danger clone>添加更多< /按钮> 
< button class =btn btn-danger remove>移除< /按钮> 
< / div> 
 
<！ -  End class =col-sm-4 - > 
< / div> 
  
以下是jQuery Script： 
 
 <$ （$code> $（document）.ready（function（）
 {
 $（button.clone）。on（click，clone）; $ b $ （click，remove）; 
}）
 var regex = /^(.+?)(\d+)$/ b 
 $（button.remove）。一世; 
 var cloneIndex = $（。clonedInput）。length; 
函数clone（）{
 
 $（this）.closest（。rounded）。clone（）$ b $ .insertAfter（。rounded：last）
 .attr（id，rounded+（cloneIndex + 1））
 .find（*）
 .each（function（）{
 var id = this.id ||; 
 var match = id.match（regex）|| []; $ b $ if（match.length == 3）{
 this.id = id.split（' - '）[0] +' - '+（cloneIndex）; 
} 
}）
 .on（'click'，'button.clone'，clone）
。 on（'click'，'button.remove'，remove）; 
 cloneIndex ++; 
} 
 function remove（）{
 $（this）.parent（）。parent（。rounded）。remove（）; 
 
 $ / code> 
问题是整个div被克隆，只是div id是被改变： 
 
 
  
 
 
 
这里是每个div都会增加： 
 
 
  < img src =https://i.stack.imgur.com/NU8gG.pngalt =在这里输入图片描述>  
 
 
 
 我需要克隆2个元素，而不是整个div和按钮 
 
 
 
最后我不需要使用Ajax和PHP将它们添加到数据库中 > 
 
解决方案
在这里，您可以使用代码。在 clone（） 
 
 
 
 
 
 
中进行了更改
 
 
您首先找到现有的小孩eleme nt。
 
 
比克隆该元素并将其追加到最后一个元素后面
 
  var cloneIndex = $（。clonedInput） .length; 这应该在 clone（）中，因此它会将子元素的正确递增值作为 id < 
 
 
 $ b $ p 
 $ b $ p 
 
 
 
 $ p $下面的代码只是为了克隆 clonedInput 不是全部 div  
 
 
 
 编辑 
 
 
 
我也编辑删除功能。
 
 
 
它只会删除最后一个元素被克隆。 
 
 
 
希望这可以帮助你。 ：）
 
 
 
 
 button.clone）。on（click，clone）; $（button.remove）。on（click，remove）;}）; var regex = /^(.+?)((\\ d +）$ / i;函数clone（）{var cloneIndex = $（。clonedInput）。length; $（。rounded）。find（＃clonedInput1）。clone（）。insertAfter（.clonedInput：last）。attr（id，clonedInput+（cloneIndex + 1））;} function remove （）。$（。rounded）。find（.clonedInput：last）。remove（）;}  
 
 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =col-sm-4 roundedstyle =background-color：＃D3D3D3> < div class =row clonedInputid =clonedInput1> < div class =col-sm-6> < label for =diagnosis_data>药物服务< / label> < fieldset class =form-group> < select class =form-control selectname =diagnosis_dataid =diagnosis_data> < option value =choose>选择< / option> < /选择> < /字段集> <！ -  End class =col-sm-6 - > < / DIV> < div class =col-sm-6> < label for =medication_quantity>数量< / label> < fieldset class =form-group> < input type =numberclass =form-controlname =medication_quantityid =medication_quantity> < /字段集> <！ -  End class =col-sm-6 - > < / DIV> <！ -  End class =col-sm-6 - > < / DIV> < div class =操作拉右> < button class =btn btn-danger clone>添加更多< / button> < button class =btn btn-danger remove>移除< /按钮> < / DIV> <！ -  End class =col-sm-4 - > < / div>  
 
 
 
 
I had this HTML script which contains a drop list and a text box, and I just need to clone those two instead of the whole div, and then send the data to AJAX, and each drop list with text box will form an array that should be add as a single row in a table, that's what I have now:
        <div class="col-sm-4 rounded" style="background-color: #D3D3D3">
          <div class="row clonedInput" id="clonedInput1">
          <div class="col-sm-6 ">
              <label for="diagnosis_data">Medication</label>
                <fieldset class="form-group">
                  <select class="form-control select" name="diagnosis_data" id="diagnosis_data">
                    <option value="choose">Select</option>
                  </select>
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <div class="col-sm-6">
              <label for="medication_quantity">Quantity</label>
                <fieldset class="form-group">
                  <input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="actions pull-right">
            <button class="btn btn-danger clone">Add More</button> 
            <button class="btn btn-danger remove">Remove</button>
          </div>

        <!-- End class="col-sm-4" -->
        </div>
And here is the jQuery Script:
$(document).ready(function()
  {
    $("button.clone").on("click", clone);

    $("button.remove").on("click", remove);
  })
    var regex = /^(.+?)(\d+)$/i;
    var cloneIndex = $(".clonedInput").length;
    function clone(){

        $(this).closest(".rounded").clone()
            .insertAfter(".rounded:last")
            .attr("id", "rounded" +  (cloneIndex+1))
            .find("*")
            .each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = id.split('-')[0] +'-'+(cloneIndex);
                }
            })
            .on('click', 'button.clone', clone)
            .on('click', 'button.remove', remove);
        cloneIndex++;
    }
    function remove(){
        $(this).parent().parent(".rounded").remove();
    } 
The problem is that the whole div is being cloned and just the div id is being changed:



Here is the id of each div is being incremented:



I need to clone the 2 elements only not the whole div and buttons

At the end I need t add them to database using Ajax and PHP
解决方案
Here you can go with the code.

In this code i made changes in clone()


Here the changes

You first find existing child element.
Than clone that element and append it after last element
var cloneIndex = $(".clonedInput").length; this should be in clone() So it will pass proper incremented value of child element as id in your cloned html



the below code just only make clone of clonedInput not a whole div

Edit

I also edit remove function also.

It will only removes last element which was cloned. 

Hope this will helps you. :)



$(document).ready(function()
{
  $("button.clone").on("click", clone);
  $("button.remove").on("click", remove);
});

var regex = /^(.+?)(\d+)$/i;

function clone() {
  var cloneIndex = $(".clonedInput").length;
  $(".rounded").find("#clonedInput1").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" +  (cloneIndex+1));
}

function remove() {
  $(".rounded").find(".clonedInput:last").remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 rounded" style="background-color: #D3D3D3">
          <div class="row clonedInput" id="clonedInput1">
          <div class="col-sm-6 ">
              <label for="diagnosis_data">Medication</label>
                <fieldset class="form-group">
                  <select class="form-control select" name="diagnosis_data" id="diagnosis_data">
                    <option value="choose">Select</option>
                  </select>
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <div class="col-sm-6">
              <label for="medication_quantity">Quantity</label>
                <fieldset class="form-group">
                  <input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="actions pull-right">
            <button class="btn btn-danger clone">Add More</button> 
            <button class="btn btn-danger remove">Remove</button>
          </div>

        <!-- End class="col-sm-4" -->
        </div>





                        
这篇关于jQuery递增克隆的元素而不是克隆的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.