如何在jquery中克隆和放置两个不同的项目在各自的位置

Question

我有一个div和一个关闭该div的按钮。 我将它们分别克隆并为两者分配唯一的递增ID。 一切正常，克隆发生，按钮关闭Div。 关于按钮的位置，我有一个问题。 我希望按钮总是在参考其克隆的div时处于相同的位置。 任何想法如何做到这一点？

HTML

<a href="#" class="button" onclick="hideDiv(this)" id="btn">X</a>
<div id="id"></div>
<a href="#" onclick="duplicateDiv()">Add</a>

使用Javascript

function duplicateDiv(){ 
    $('#btn').clone().attr('id', 'btn'+ cloneCount2++).insertBefore($('[id^=id]:first'));

    $('#id').clone().attr('id', 'id'+ cloneCount++).insertAfter($('[id^=id]:first'));

    //clearing the input items in the new cloned div
    $("#id").find("input").val("");     
}


function hideDiv(obj){
    var currentId = $(obj).attr('id');
    var divId = currentId.replace("btn", "id");
    $("#"+divId).hide();
    $("#"+currentId).hide();
}

Answer 1

如果正确解释问题，请尝试使用.appendTo() .insertAfter($("#btn" + cloneCount))

 var cloneCount = 0, cloneCount2 = 0; function duplicateDiv() { //the close button $("#btn") .clone().attr("id", function(_, id) { return id + (++cloneCount2) }) .appendTo("body") $("#id") .clone().attr("id", function(_, id) { return id + (++cloneCount) }) .insertAfter($("#btn" + cloneCount)) //clearing the input items in the new cloned div $("#id").find("input").val(""); } function hideDiv(obj) { var currentId = $(obj).attr('id'); var divId = currentId.replace("btn", "id"); $("#" + divId).hide(); $("#" + currentId).hide(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <a href="#" class="button" onclick="hideDiv(this)" id="btn">X</a> <div id="id">div</div> <a href="#" onclick="duplicateDiv()">Add</a> 

Answer 2

其中一个方法是Jquery Offset

var destination = $('.original-content').offset(); // get position of original
$('.original-content').hide(); // hide original
$('.cloned-content').css({top: destination.top, left: destination.left}); // set position of cloned