JQuery的 - 添加DIV父DIV

我有以下幾點：JQuery的 - 添加DIV父DIV

<div id="parentCalculation"> 
<div class="btn-group" role="group"> 
    <button type="button" id="calculate" class="btn btn-default">Add</button> 
</div> 

Calculate below. Click on "Add to make another calculation 

<div id="CalculateDiv"> 
<div class="calculation form-group well well-lg col-md-4"> 
    <label for="cost">Enter Amount</label> 
    <input type="text" id="amount" class="form-control" placeholder="0.00"> 
    <label for="type">Type</label> 
    <input type="text" id="type" class="form-control" placeholder="e.g. transfers"> 
    <label for="comments">Comments</label> 
    <textarea class="form-control" id="cost-comments" placeholder="Enter comments"></textarea> 
</div> 

</div> 
</div>

我想要做的就是calculation追加父DIV CalculateDiv以便有重複的值。

我使用下面的JQuery：

$(document).ready(function() 
        { 

        $("#calculate").click(function() 
        { 
         var x = $('.CalculateDiv'); 
         alert(x); 
         $("#parentCalculation").append(x); 


        }); 

        });

的問題是，它不添加到父DIV，我似乎無法找出原因。

見例如：Here

來源

2015-05-08 Phorce

你不是創建一個新的元素，你只是移動它。使用'.clone（）' –

我想你要複製的元素，那麼你將不得不克隆x否則你將只是重新定位的元素。

$(document).ready(function() { 
    $("#calculate").click(function() { 
     var x = $('#CalculateDiv').clone(); //id-selector to be used also clone it 
     x.removeAttr('id'); //since id of an element must be unique remove the id from clone 
     $("#parentCalculation").append(x); 
     //or x.appendTo('#parentCalculation'); 
    }); 
});

演示：Fiddle

我想你可以只複製calculation DIV

$(document).ready(function() { 
    $("#calculate").click(function() { 
     var x = $('#CalculateDiv .calculation').first().clone(); 
     $("#CalculateDiv").append(x); 
    }); 
});

演示：Fiddle

來源

2015-05-08 12:45:48

@ Karl-AndréGagnon是的... –

感謝您的支持！唯一的問題是，因爲它們是輸入框，我如何爲所有添加的表單組件的每個輸入獲取值？我嘗試了'$（「＃CalculateDiv」）。每個（..）'但沒有succsess？ – Phorce

您選擇搜索一個類，WH ILE你有HTML與ID：

$('.CalculateDiv');應該$('#CalculateDiv');

來源

2015-05-08 12:46:09 devqon

如果我正確理解他，我認爲他的課堂部分正確，但名稱錯誤，認爲他想要$（'。calculation'） – swornabsent

jQuery代碼試圖找到「類名稱」作爲CalculateDiv的元素。然而，在你的html結構中沒有class =「CalculateDiv」的元素。有一個id =「CalculateDiv」。只要改變$('.CalculateDiv')到$('#CalculateDiv')

還追加這樣

$("#parentCalculation").append($(x[0]).html());

當你只是追加DOM對象它不會讓任何事情發生。上面的代碼中選擇該div的HTML內容，然後將其追加到parentCalculation DIV

這是你的最終代碼應該如何

$(document).ready(function() { 

    $("#calculate").click(function(){ 
     var x = $('#CalculateDiv'); 
     $("#parentCalculation").append($(x[0]).html()); 
    }); 

});

來源

2015-05-08 13:08:23 Shades88

JQuery的 - 添加DIV父DIV

回答

相關問題