jQuery clone（）の例

投稿日: 2019-11-05 2019-11-05
タグ: jquery, jquery manipulation

jQuery

clone（）

は、一致する要素のコピーを作成するために使用されます。また、対応する要素と一緒にイベントハンドラとデータをコピーする必要があるかどうかを示すブール型パラメータもサポートしています。

1. html要素を複製する

たとえば、次のhtmlコードをクローンします。

 <div class="smallBox">
    I'm a small box
    <div class="smallInnerBox">I'm a small small inner box</div>
 </div>

上記の要素のコピーを作成するにはclone（）を使用し、クラス名が “smallBox”のdivタグの後にコピーした要素を配置します。

$('.smallBox').clone().insertAfter(".smallBox");

結果 :

 <div class="smallBox">
    I'm a small box
    <div class="smallInnerBox">I'm a small small inner box</div>
 </div>
  <div class="smallBox">
    I'm a small box
    <div class="smallInnerBox">I'm a small small inner box</div>
 </div>

2.イベントハンドラをクローン化する

次の例では、ボタンのクリックイベントを複製し、idが ‘cloneButton1’のボタンをコピーします。

<button id="cloneButton1">clone()</button>

<script type="text/javascript">
    $("#cloneButton1").click(function () {

      $('.smallBox').clone().insertAfter(".smallBox");

    });
</script>

デフォルトの** clone（）メソッドまたはclone（false）メソッドを使用している場合は、button要素のみをコピーしますが、click（）イベントハンドラはコピーしません。

$('#cloneButton1').clone().insertAfter("#cloneButton1");

一致する要素とともにclick（）イベントハンドラをコピーするには、clone（true）を使用する必要があります。

$('#cloneButton1').clone(true).insertAfter("#cloneButton1");

自分で試してみてください

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    .smallBox{
        padding:8px;
        border:1px solid blue;
        margin:8px;
    }
    .smallInnerBox{
        padding:8px;
        border:1px solid green;
        margin:8px;
    }
</style>

</head>
<body>
  <h1>jQuery clone() example</h1>

  <div class="smallBox">
    I'm a small box
    <div class="smallInnerBox">I'm a small small inner box</div>
   </div>

  <p>
  <button id="cloneButton1">clone()</button>
  <button id="cloneButton2">clone() button (default)</button>
  <button id="cloneButton3">clone(true) button</button>
  <button id="reset">reset</button>
  </p>

<script type="text/javascript">

    $("#reset").click(function () {
      location.reload();
    });

    $("#cloneButton1").click(function () {

      $('.smallBox').clone().insertAfter(".smallBox");

    });

    $("#cloneButton2").click(function () {

      $('#cloneButton1').clone(false).insertAfter("#cloneButton1");

    });

    $("#cloneButton3").click(function () {

      $('#cloneButton1').clone(true).insertAfter("#cloneButton1");

    });

</script>
</body>
</html>

デモを試してください

jquery

jquery
操作

getdocs

13036