Javascript 在克隆期间更改内部元素id

我正在做一个DIV元素的克隆，点击按钮，我可以更改我克隆的DIV元素的ID值。但是是否可以更改内部元素的id

在下面的代码中，我正在更改

#selection

的Id。克隆时，我需要动态更改Id

#select

<div id="selections">
  <div class="input-group" id="selection">
    <span class="input-group-addon">
    <i class="icon wb-menu" aria-hidden="true"></i>
     </span>
    <select class="show-tick" data-plugin="select2" id="select">
      <option>True</option>
      <option>False</option>
    </select>
  </div>
</div>
<button class="btn btn-primary" type="button" style="margin-left: 30px;">
  Add new selection
</button>

---

是的。。完全可能的情况如下：

var clone = $("#selection").clone();
clone.attr("id", newId);

clone.find("#select").attr("id","select-"+length);

//append clone on the end
$("#selections").append(clone); 

---

您需要手动更改所有孩子的ID

或者仅将其更改为一个，如下所示：

//clone first element with new id
clone = $("#selection").clone();
clone.attr("id", newId);
clone.find("#select").attr("id","whateverID");

---

或者使用类似的方法更改所有子元素：

使用类

.show tick

和

.children（）

方法来定位元素：

clone.children('.show-tick').attr('id', 'select-' + length);

$（函数（）{
//点击
$（“.btn primary”）。在（“单击”，函数（）{
警报（$（“.input group”）.length）
变量
//获取选择的长度
长度=$（“.input group”）.length，
//创建新id
newId=“选择-”+长度，
//用新id克隆第一个元素
clone=$（“#选择”）.clone（）.attr（“id”，newId）；
clone.children（'.show tick'）.attr（'id'，'select-'+length++）；
//在末尾附加克隆
$（“#选择”）.append（克隆）；
});
});

真的
假的
添加新选择
我同样需要更改克隆及其所有子项的id。发布我的解决方案以在将来帮助他人。我想更改克隆的所有子项的ID和名称

    $("#form").on('click', '.clone', function (e) {           
        e.preventDefault();

        var myid = this.id;  // id of section we are cloning i.e. section_1
        myid = myid.split('_');

        var num = 0;   
        // count existing sections
        $('.form_section').each(function(){
            num++;
        }); 
        num++; // new number for clone
        var newid = 'section_'+num;
        // make and change id of the clone
        var clone = $( "#section_"+myid[1] ).clone().attr("id", newid);
        // get clone children
        clone.children().find('input,textarea,button,a,select').attr('id', function( i, val ){ 
             var oldid = val;
             var newid = val + num;
             clone.find("#"+val).attr("id", newid);
             clone.find("#"+newid).attr("name", newid);
        });

        clone.appendTo( ".sections" );

    });

    $("#form").on('click', '.clone', function (e) {           
        e.preventDefault();

        var myid = this.id;  // id of section we are cloning i.e. section_1
        myid = myid.split('_');

        var num = 0;   
        // count existing sections
        $('.form_section').each(function(){
            num++;
        }); 
        num++; // new number for clone
        var newid = 'section_'+num;
        // make and change id of the clone
        var clone = $( "#section_"+myid[1] ).clone().attr("id", newid);
        // get clone children
        clone.children().find('input,textarea,button,a,select').attr('id', function( i, val ){ 
             var oldid = val;
             var newid = val + num;
             clone.find("#"+val).attr("id", newid);
             clone.find("#"+newid).attr("name", newid);
        });

        clone.appendTo( ".sections" );

    });