jQuery｢.clone()｣で指定要素をコピーする方法

2020年7月16日

jQueryの「.clone()」は、指定要素をコピーする事ができるメソッド

今回は、jQueryの「.clone()」について、その使い方をサンプルを交えて解説しよう。

.clone()の機能とは？

.clone()の機能

.clone()は、「指定要素をコピーする」事ができる。

.clone()はコピーするだけなので、コピーしたものを使う時はappentTo()やinsertAfter()などの挿入系のメソッドを使って貼り付けて利用する。

appentTo()やinsertAfter()をおさらいしたい方はこちらの記事どうぞ。

▶ jQuery｢append / appendTo｣で要素内の末尾にHTMLを挿入する

▶ jQuery｢insertAfter｣でHTMLを「指定要素の直後」に移動する

.clone()の構文

.clone()の構文は次のような記述となる

$("セレクタ").clone(論理値);

この記述で$("セレクタ").で指定した要素をコピーする事ができる。論理値とは「true or false」の真偽値を指し、引数にtrueの論理値を入れる事で、元の「イベントハンドラ」を引き継ぐ事ができる。（イベントハンドラとは、イベントによって発生する「命令内容」を指す）

指定しない場合はデフォルト値のfalseが適用され、単純に指定した「jQueryオブジェクト」だけをコピーする事になる。

.clone()の使用例

たとえば次のようなHTMLがあったとする

HTML

<button id="test">コピー</button>
<div></div>

jQuery

$(function(){
  $("#test").on("click",function(){
    $(this).clone(true).appendTo("div");
  });
});

この例は、ボタンをクリックする事で、divの中に押したボタンそのものをコピーして配置する機能。.clone(true)のように引数にtrueと入れているので「コピーしてdiv内に貼り付ける」というイベントハンドラ自体もコピーされたので、複製したボタンをクリックしても、さらに同じようにボタンが複製される事になる。

この例ではコピーしてそのままdiv内に貼り付けたが、次のように一旦変数に格納しても良いだろう。

var copy = $(this).clone(true);

codepenで動きを確認してみよう。

See the Pen clone() by stand4u (@stand4u) on CodePen.

ボタンをクリックすると、複製される事と、複製したボタンをクリックしても、同様に複製される事が確認できるだろう。

.clone()の使い所

.clone()はさまざまな利用用途があるが、「カルーセルの画像のスライダー」の無限ループを作るのにも利用できる。

上の図のような「10個の画像中、３つだけ見えているスライダー」を作るとする。

html的にはシンプルに10個の画像が並んでいるだけで良いのだが、01が見えている状態で「左の矢印」を押した場合や、「右の矢印」を押しつづけて10個目が見えた後に、最初の１つ目の画像をループしたように見せる方法としてclone()を利用する方法がある。

仕組みだけ解説すると、矢印を押すと同時に、11個目に「１つ目の画像コピーして配置」した上で、元々ある１つ目の画像remove()などで削除する事で、11個目に1個目の画像が移動するような仕組みを作る事ができる。

もっとスマートなやり方もあるかもしれないが、こんな感じでclone()を応用してみてはいかがだろうか？

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント