在克隆过程中更改内部元素id

Change inner elements id during clone

本文关键字：内部 元素 id 过程中      更新时间：2023-09-26

我正在克隆一个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);
  });
});

是。。其完全可能如下：

var clone = $("#selection").clone();
clone.attr("id", newId);
clone.find("#select").attr("id","select-"+length);
//append clone on the end
$("#selections").append(clone);

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

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

要么只更改一个：

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

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

相关文章：