jQuery clone方法在頁面內克隆多個（多個）div（不是單個div多次）

Question

我需要一種方法來克隆說4個div，其ID為d_1，d_2，d_3，d_4之類的ID，包括每個div內的所有內容，然后一次分離所有div，然后我需要從克隆中找到d_1及其內容的副本再次將其附加到頁面。

就像是：

        var cloned=$('[id^="d_"]').clone();

        $('[id^="d_"]').detach();

然后從克隆中找到id =d_1 div並將其附加到正文中。

可能嗎？

Answer 1

您可以appendTo()元素將元素分離並移動到其他位置。

var els = $('[id^="d_"]')

els.detach();

els.each(function() {
  if (this.id.indexOf('d_1') !== -1) {
    $(this).appendTo(document.body);
  }
});

// do something else with els later, too.

Answer 2

使用文檔片段。

var $documentFragment = $(document.createDocumentFragment());
$('[id^="d_"]').each(function(){
   $documentFragment.append($(this).clone().addClass("_cloned"));
});

$documentFragment.clone().appendTo(document.body);

如果要在片段中查找元素，可以執行以下操作：

$(document.body).find("#d_1._cloned"). ... ;

如果要刪除所有元素，然后僅將第一個復制的內容附加到片段中：

$("._cloned", document.body).remove();
$documentFragment.find("#d_1").clone().appendTo(document.body);