[英]How to clone and place two different items in jquery in the respective positions
我有一個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>
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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.