web-dev-qa-db-ja.com

クローン作成中に内部要素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>

以下の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);
  });
});
javascriptjquerytwitter-bootstrapclone
12
Jeeppp

はい..次のように完全に可能です：

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

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

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

クラス_.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>_
1
PeterKA

すべての子供のIDを手動で変更する必要があります。

そのようなものだけに変更してください：

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

または、次のようなものを使用してすべての子を変更します。 jQueryがすべての子のid属性を変更する

1
Florian