我从表单中获取所有输入并将其克隆到另一个表单中。这很好用(修复了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故事
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()处理选择和textareas,你需要这个https://github.com/spencertipping/jquery.fix.clone
答案 0 :(得分:1)
这应该有效:
$('form#Receiver').append($('<div class="appended">')
.append($(this).find('div.name') .clone())
.append($(this).find(':input').not(':button') .clone())
.append('<button>delete</button>')
);
答案 1 :(得分: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);