[解決済み] クローンや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>
関連
-
Vueでルートネスティングを実装する例
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] ディープクローンオブジェクト
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vue+ElementUIによる大規模なフォームの処理例
-
Vueのフィルタの説明
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
JavaScriptのStringに関する共通メソッド
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方