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

回答

相关问题