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

How to clone and place two different items in jquery in the respective positions

本文关键字：两个 项目 位置 jquery      更新时间：2023-09-26

我有一个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();
}

如果正确解释问题，请尝试使用.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>

其中一种方法是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
相关文章：