1. ホーム
  2. javascript

[解決済み] クローンやIDを変更する方法は?

2022-06-11 13:28:42

質問

idをクローンして、その後ろに数字を追加する必要があります。 id1 , id2 など。cloneを押すたびに、idの最新番号の後にcloneを置くことになります。

$("button").click(function() {
    $("#id").clone().after("#id");
}); 

どのように解決するのですか?

$('#cloneDiv').click(function(){


  // get the last DIV which ID starts with ^= "klon"
  var $div = $('div[id^="klon"]:last');

  // Read the Number from that DIV's ID (i.e: 3 from "klon3")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
  var $klon = $div.clone().prop('id', 'klon'+num );

  // Finally insert $klon wherever you want
  $div.after( $klon.text('klon'+num) );

});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<button id="cloneDiv">CLICK TO CLONE</button> 

<div id="klon1">klon1</div>
<div id="klon2">klon2</div>


スクランブルされた要素、最も高いIDを取得する

のようなIDを持つ要素がたくさんあるとします。 klon--5 のようなIDを持つ要素がたくさんあるが、スクランブルされている(順番通りではない)。ここで はできません になる :last または :first といった具合に、最も高いIDを取得する仕組みが必要です。

const all = document.querySelectorAll('[id^="klon--"]');
const maxID = Math.max.apply(Math, [...all].map(el => +el.id.match(/\d+$/g)[0]));
const nextId = maxID + 1;

console.log(`New ID is: ${nextId}`);
<div id="klon--12">12</div>
<div id="klon--34">34</div>
<div id="klon--8">8</div>