克隆表单元素，然后将它们包装在一个 div 中，然后追加？答案

【问题标题】：Clone form elements, then wrap them in a div, then append?克隆表单元素，然后将它们包装在一个 div 中，然后追加？
【发布时间】：2016-12-29 16:04:53
【问题描述】：

我从一个表单中获取所有输入并将它们克隆到另一个表单中。这很好用（通过 jquery.fix.clone.js 的修复）。我现在只是试图将元素包装到一个 div 中，这不起作用，因为 jquery 总是添加标签的另一半，比如<div></div>

addbutt = $("form.prodform button.add");
    addbutt.click(function(e){
        e.preventDefault();
        theform = $(this).closest('form');
        $(theform).each(function(){
            //lets validate,then we add
            $('form#Receiver').append('<div class="appended">');
            $('form#Receiver').append($(this).find('div.name') .clone());
            $('form#Receiver').append($(this).find(':input').not(':button') .clone());
            $('form#Receiver').append('<button>delete</button>');           
            $('form#Receiver').append('</div>');
        });
    })

我尝试使用 html() 来获取找到的输入，但这只是获取输入，而不是值。尝试这样：

inputs = $(this).find(':input').not(':button');
            $.each(inputs, function(i, val){
                inouts = inouts + $(val).prop('outerHTML');
            });

还尝试了$('form#Receiver').append($(this).find('.name') .clone().html())的许多变体

所以，我知道我需要做的是找到我的输入并将它们克隆到我的包装器 div 中。如何存储克隆的元素，将它们放在一个 div 中，例如：

$('form#Receiver').append('<div class="appended">' + namediv + inputs + '</div>');

这是工作结果，感谢@Derek Story

addbutt = $("form.prodform button.add");
addbutt.click(function(e){
    var inputs = [];
    var divs = [];
    var theform = $(this).closest('form');
    e.preventDefault();     
    theform.find(':input').not(':button').each(function() {//using :intput cuz it might be selects, etc.
      inputs.push($(this).clone());
    });
    theform.find('div.name').each(function() {
      divs.push($(this).clone());
    });

    var container = $('<div class="appended" />').append(divs, inputs);
    $('form#Receiver').append(container);
})

让我补充一下，为了让 clone() 处理选择和文本区域，你需要这个 https://github.com/spencertipping/jquery.fix.clone

【问题讨论】：

标签： jquery clone

【解决方案1】：

要存储克隆的元素，您可以将它们推送到一个数组中，例如：

var inputs = [];
$('input').each(function() {
  inputs.push($(this).clone());
});

要将它们包装在一个新元素中，您应该能够执行以下操作：

// create the wrapper and append the cloned elements
var container = $('<div class="appended" />').append(namediv, inputs); 
// append the wrapper
$('form#Receiver').append(container);

Codepen example

【讨论】：

这看起来不错，但我不确定在哪里插入 input.pushing 部分。在$(theform).each(function(){ 内？
我不太确定你为什么需要将你的东西包装在 each() 声明中。该变量仅使用.closest() 抓取一个，因此您并没有真正循环任何内容。如果您要检查它是否存在，请在 if 语句中使用 .length 检查。
页面上有很多表单，每个表单都有一个“添加”按钮。我只需要从选定的表单中获取所有输入。（这是我的思考过程，我并不是说它是正确的）。看起来你的会抓取页面上的每一个输入。
theForm 只返回一个表单。所以不需要循环遍历theForm。我的例子只是一个例子。您可以使用相同的方法来获取您需要的特定输入。仍然将它们存储在数组中。我也不确定您为什么要在 (":input") 和 (":button") 中添加冒号
并且只获取该表单的输入，您只需执行theForm.find('input')

【解决方案2】：

这应该有效：

    $('form#Receiver').append($('<div class="appended">')
       .append($(this).find('div.name') .clone())
       .append($(this).find(':input').not(':button') .clone())
       .append('<button>delete</button>')
    );

【讨论】：