克隆表單元素，然後將它們包裝在一個div中，然後追加？

我從窗體獲取所有輸入並將它們克隆到另一個窗體中。這很好（修復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

來源

2016-08-23 Doug Cassidy

要存儲克隆的元素，你可以把它們變成像一個數組：

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

來源

2016-08-23 01:41:24

這看起來不錯，但我不知道在哪裏插入input.pushing部分。在'$（theform）.each（function（）{'？ –

）中我不太確定爲什麼你需要用'each（）'語句來包裝你的東西，變量只能用'.closest（） '，所以你沒有真正循環任何東西，如果你正在檢查它是否存在，那麼在if語句中使用'.length'檢查 –

頁面上有很多表單，每個表單都有一個'add'按鈕，我需要從所選擇的表單中獲取所有輸入（這是我的思考過程，我並不是說它是正確的），看起來像你的將要抓取頁面上的每個輸入 –

這應該工作：

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

來源

2016-08-23 01:04:33 MichaelG

這工作，也謝謝@MichaelG –

克隆表單元素，然後將它們包裝在一個div中，然後追加？

回答

相關問題