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

【问题标题】：Change inner elements id during clone在克隆期间更改内部元素 id
【发布时间】：2016-01-30 23:47:32
【问题描述】：

我在单击按钮时克隆 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>

下面的JS

$(function() {
  //on click
  $("body").on("click", ".btn-primary", function() {
    alert($(".input-group").length)
    var
    //get length of selections
      length = $(".input-group").length,
      //create new id
      newId = "selection-" + length++,
      //clone first element with new id
      clone = $("#selection").clone().attr("id", newId);
    //append clone on the end
    $("#selections").append(clone);
  });
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap clone

【解决方案1】：

是的..它完全有可能如下：

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

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

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

【讨论】：

【解决方案2】：

使用类.show-tick和.children()方法定位元素：

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

$(function() {
  //on click
  $(".btn-primary").on("click", function() {
    alert($(".input-group").length)
    var
    //get length of selections
      length = $(".input-group").length,
      //create new id
      newId = "selection-" + length,
      //clone first element with new id
      clone = $("#selection").clone().attr("id", newId);
      clone.children('.show-tick').attr('id', 'select-' + length++);
    //append clone on the end
    $("#selections").append(clone);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案3】：

我也有类似的需要更改克隆及其所有子项的 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" );

    });

【讨论】：

【解决方案4】：

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

要么把它改成这样的一个：

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

或使用类似的方式更改所有孩子：jQuery changing the id attribute of all the children

【讨论】：