如何使用jQuery複製點擊div？

我想要div在單擊button後自動複製。我發現JS解決方案，但我需要一個jQuery之一，我真的很糟糕。任何人都可以幫助我嗎？如何使用jQuery複製點擊div？

這就是我：

<div class="example-1"> 
    <div class="example-2"> 
    <p>Example one</p> 
    <p>Example two</p> 

    <button class="btn-copy">Copy</button> 
    </div> 
</div>

這就是我需要的（後點擊）：

<div class="example-1"> 
    <div class="example-2"> 
    <p>Example one</p> 
    <p>Example two</p> 

    <button class="btn-copy">Copy</button> 
    </div> 

    <div class="example-2"> 
    <p>Example one</p> 
    <p>Example two</p> 

    <button class="btn-copy">Copy</button> 
    </div> 
</div>

來源

2016-10-27 EmptySnake

你需要嘗試。你無法瞭解是否有人會提供你的代碼。 https://api.jquery.com/clone/ http://api.jquery.com/after/ http://api.jquery.com/insertafter/ –

利用.clone()複製div和.after()追加。由於您正在使用課程，因此您可能只需要複製一個div，在這種情況下，您應該使用.closest()。你還需要傳遞一個布爾參數來克隆，這樣所有的數據和事件處理程序將被連接到克隆的元素。

$(function(){ 
 
    $(".btn-copy").on('click', function(){ 
 
    var ele = $(this).closest('.example-2').clone(true); 
 
    $(this).closest('.example-2').after(ele); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example-1"> 
 
    <div class="example-2"> 
 
    <p>Example one</p> 
 
    <p>Example two</p> 
 

 
    <button class="btn-copy">Copy</button> 
 
    </div> 
 
</div>

來源

2016-10-27 04:20:08

Thx for answer but複製'button'應該在重複的' div'並且重複正確的'div'。不是第一個。 – EmptySnake

編輯答案。檢查它 –

似乎是正確的。按鈕重複塊已被按下？ – EmptySnake

使用此方法clone。像這樣：

$(document).on(click,'.btn-copy',function(){ 
    $(this).parents('.example-1').append($(this).parent().clone()); 
});

希望它有幫助。

來源

2016-10-27 04:16:58

更新

$(document).ready(function(){ 
 
    $('button').click(function(){ 
 
     $('.example-1').append($('.example-1').html()) 
 
    
 
     //console.log($('.example-1').html()); 
 
    }) 
 
    
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example-1"> 
 
    <div class="example-2"> 
 
    <p>Example one</p> 
 
    <p>Example two</p> 
 
<button class="btn-copy">Copy</button> 
 
    </div> 
 
    
 
</div> 
 

 
<!--its only print at once-->

來源

2016-10-27 04:20:26 prasanth

Thx for answer，但複製'button'也應該在重複的'div'中工作。 'button'在最後一個末尾只能克隆一個'div'。 – EmptySnake

你只需要一個右鍵的按鈕 – prasanth

看到更新後的答案..它應該沒問題 – prasanth

試試這個

$('.btn-copy').click(function() 
 
{ 
 
$('.example-1').append($('.example-2').html()); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example-1"> 
 
    <div class="example-2"> 
 
    <p>Example one</p> 
 
    <p>Example two</p> 
 

 
    <button class="btn-copy" >Copy</button> 
 
    </div> 
 
</div>

來源

2016-10-27 04:22:37

Thx for answer，但複製'button'也應該在重複的'div'中工作，並複製正確的'div'。不是第一個。 – EmptySnake

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<BODY> 
<script> 
$(document).ready(function() { 
    $(".btn-copy").click(function(event){ 
    console.log('You clicked button'); 
    var parentnode=this.parentNode; 
    var OuterHtml=parentnode.outerHTML; 
    var TopLevel=parentnode.parentNode; 
    $(TopLevel).append(OuterHtml); 
    }); 
}); 
</script> 
<div class="example-1"> 
    <div class="example-2"> 
    <p>Example one</p> 
    <p>Example two</p> 
    <button class="btn-copy">Copy</button> 
    </div> 
</div> 
</BODY> 
</HTML>

來源

2016-10-27 04:57:56

如何使用jQuery複製點擊div？

回答

相關問題