2016-08-23 93 views
1

我从窗体获取所有输入并将它们克隆到另一个窗体中。这很好(修复jquery.fix.clone.js)。我现在只是想换行元素融入一个div,其心不是工作因为jQuery总是添加标签的另一半,像<div></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故事

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); 
}) 

让我补充,为了克隆()对选择和文字区域工作,你需要这个https://github.com/spencertipping/jquery.fix.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

+0

这看起来不错,但我不知道在哪里插入input.pushing部分。在'$(theform).each(function(){'? –

+0

)中我不太确定为什么你需要用'each()'语句来包装你的东西,变量只能用'.closest() ',所以你没有真正循环任何东西,如果你正在检查它是否存在,那么在if语句中使用'.length'检查 –

+0

页面上有很多表单,每个表单都有一个'add'按钮,我需要从所选择的表单中获取所有输入(这是我的思考过程,我并不是说它是正确的),看起来像你的将要抓取页面上的每个输入 –

1

这应该工作:

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

这工作,也谢谢@MichaelG –

相关问题