用途
新着
履歴
分類

jQuery 要素のクローンを作成

jQuery 要素のクローンを作成
表示されている要素と同じものを動的に作成するサンプルです。

ユーザーがクリックしたら同じ要素が複製されるような機能を作るときには、cloneメソッドが便利です。

わざわざクローンを生成しなくても、同じタグをappendすればいいと思いがちですが、その複製元のコードが変わった場合、どちらも変更しないとなりません。

一元管理の方が後々楽になります。

以下はボタンがクリックされると、特定のデモのdivが下のエリアに押した分だけ複製されます。

demo box
クローンの作成

JSはこちら

$('.demo_btn').on('click',function(){
	$(".demo_box").eq(0).clone().appendTo("#demo_area");
});

HTMLもシンプルです。

<div class="demo_box">demo box</div>
<div class="demo_btn">クローンの作成</div>
<div id="demo_area"></div>

気をつける点は、複製元のclassごと複製するので、「.eq(0)」を指定しないと画面上の複数のclassが見つかれば、2つ、4つ、8つと倍増して複製してしまいます。

「.eq(0)」を指定することで、一致するclassの一つ目を複製するという内容になります。


次のサンプルは複製された要素にもイベントを引き継ぐ書き方です。

クローン
作成

クリックするとそのボタン自体が複製されていきます。

複製されたボタンも、クローンを作るイベントが効いているということです。

JS

$('.demo_btn_clone').on('click',function(){
	$(this).clone(true).appendTo("#demo_area2");
});

HTMLはこちら

<div id="demo_area2">
	<div class="demo_btn_clone">クローン<br>作成</div>
</div>

こちらはthisを使うことにより、押された要素一つを複製しています。

公開 2019-08-03 22:50:00
このページの二次元コード
jQuery 要素のクローンを作成

人気のサンプル

search -  category -  about
© 2024 kipure
Top