Question

我正在按钮点击时修复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);
  });
});

Answer 1

是..完全有可能如下：

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

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

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

Answer 2

您需要手动更改所有孩子的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

Answer 3

使用课程.show-tick和.children()方法找到元素：

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

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

Answer 4

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

    });

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

4 个答案: