特定の要素内の全ての要素のコピー/他要素へペースト

Question

前提・実現したいこと

特定の要素内の全ての要素をコピーして、他の要素内に追加したいです。

発生している問題・エラーメッセージ

下のコードだと、２つ目のdiv(.under)にしかコピー(append)されません。

該当のソースコード

<div id="divforvideos">
  <video>....</video>
  <video>....</video>
  <video>....</video>
  <video>....</video>
</div>

$(function() {
  var arr = jQuery.makeArray(document.querySelectorAll("#divforvideos video"));

  $("#divforvideos").empty();
  $("#divforvideos").append('<div class="random" style="background-color:red; margin:30px;"></div>');
  $("#divforvideos").append('<div class="under" style="background-color:blue; margin:30px;"></div>');
  $(".random").append($(arr));
  $(".under").append($(arr));
});

よろしくお願いいたします。

Answer 1

まず1行目、なぜjQueryあるのにjQueryで取得しないんですか？
var arr = $("#divforvideos video");

次に本題。
.append()は元の要素を移動します。
コピーしたいときは.clone()してから.append()してください。
元の親要素に対して.empty()してあったので、追加先両方とも.clone()で入れてます。
なので、ここで保持しているarrの要素たちはどこにも追加されずに保持されてます。
arrの中身いじってもどこにも反映されないのでご注意を。

ちなみに.clone()そんなに軽い処理じゃないので複雑な構造の大量の要素を一気にコピーしようとすると特にIE11とかでめっちゃ重いです。
例示のコード程度なら大したことはないですが。

で、.clone()には引数があって、true / falseを指定できます。
trueを指定すれば、コピー対象の要素たちに登録されているイベントハンドラもコピーしてくれます。
引数渡さなかったらイベントハンドラはコピーしません。

$(function() {
  var arr = $("#divforvideos video");

  $("#divforvideos").empty();
  $("#divforvideos").append('<div class="random" style="background-color:red; margin:30px;"></div>');
  $("#divforvideos").append('<div class="under" style="background-color:blue; margin:30px;"></div>');
  $(".random").append(arr.clone());
  $(".under").append(arr.clone());
});

Comments

[退会済みユーザー]

上のコードで解決しました。
ありがとうございます。
大変勉強になりました。