Question

我有以下内容：

<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>

我想要做的是将父div CalculateDiv与calculation追加，以便存在重复值。

我正在使用以下JQuery：

$(document).ready(function()
                  {

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


                    });

                  });

问题是它没有添加到父div，我似乎无法弄清楚为什么。

参见示例：Here

Answer 1

您的选择器搜索类，而您的html包含id：

$('.CalculateDiv');应为$('#CalculateDiv');

Answer 2

我想你要复制元素然后你必须克隆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

Answer 3

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

});

JQuery - 将div添加到父div

3 个答案: