jquery - 在当前 div 之外复制 div

Question

问题

当用户单击添加 按钮时，我正在尝试克隆一个 div。问题是我现在正在克隆当前 div 中的 div。我想将它添加到 .wrapper div 但失败了。我已经尝试了一些其他的东西，比如 appendTo('.wrapper')，但没有成功。

当您点击添加按钮时，您可以看到，克隆的字段中的缩进不正确。

示例 https://jsfiddle.net/duikboot/1sakxpzq/

我在其中进行克隆的代码:

var pd = $('.product_data').last().clone();
var id_count = 0;

$(document).on('click', '.add_item', function() {
  var clone = pd.clone().prop('id', 'product_' + id_count);
  $(this).prevAll('.product_data').first().append(clone.hide());
  clone.slideDown('fast');
  id_count++;
});

感谢大家的帮助。

Answer 1

.append() 和选定容器内的内容作为最后一个子元素。您需要使用 .after() 将内容添加为下一个兄弟:

$(document).on('click', '.add_item', function() {
  var clone = pd.clone().prop('id', 'product_' + id_count);
  $(this).prevAll('.product_data').first().after(clone.hide());
  clone.slideDown('fast');
  id_count++;
});

Working Demo