twitter-bootstrap 在克隆期间更改内部元素 ID

Change inner elements id during clone

提问by Jeeppp

I'm doing a clone of a DIV element on button click, I'm able to change the value of ID of the DIV element I'm cloning. But is it possible to change the id of the inner element.

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

In the below code I'm changing the Id of #selectionwhile cloning, I need to dynamically change the id #select.

在下面的代码中，我#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>

The JS below

下面的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);
  });
});

回答by vijayP

Yes.. its totally possible as follows:

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

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

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

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

回答by Florian

You need to change all children's ID manually.

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

Either change it for only one like that:

要么只将其更改为这样的一个：

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

Or change all children using something like that: jQuery changing the id attribute of all the children

或者使用类似的方法更改所有子项：jQuery更改所有子项的 id 属性

回答by PeterKA

Use the class .show-tickand the .children()method to locate the element:

使用类.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>

回答by Mike Volmar

I had a similar need to change the id of the clone and all its children. Posting my solution to help someone in the future. I wanted to change the ids and the names of all the children of the clone.

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

    });